16赞

Angular2模板:如何使用DIV包装ngFor的内容

作者：黄晓敏3023 | 2023-09-07 15:18

如何解决《Angular2模板:如何使用DIV包装ngFor的内容》经验，为你挑选了1个好方法。

我有不确定的列数和未定义的字段长度.要显示它们,请输入以下代码:


    
        {{ d.displayName }}
        {{ viewRecord[d.fieldName]}}
    


结果是:


    
        Title 1
        Text 1....
    

    
        Title 2
        Text 2....

是否有可能将这两个放入一个容器中,如下所示:


   
        
            Title 1
            Text 1....
        
    
        
            Title 2
            Text 2....

请注意我不知道字段数,所以我必须从字段总数中将模数设为2,以将字段对包装成一个容器.很明显,包装器将在循环之外.我被困了:)

请注意,我正在寻找模板驱动的答案.如果没有,我可以应付它.我自己写的任何JavaScript;)

1> Petr Adam..：

您可以使用内置的功能*ngFor,odd和even项目.像往常一样迭代项目,但仅在迭代even项目时显示结果.并使用index直接从项目访问项目.


    
        
            
                {{ fields[index].displayName }}
                {{ viewRecord[fields[index].fieldName]}}
            
            
                {{ fields[index+1].displayName }}
                {{ viewRecord[fields[index+1].fieldName]}}

它绝对不是最好的解决方案(因为我定义了两次相同的模板),但是应该可行.

推荐阅读

程序员
使用ID作为名称从json对象创建强类型c#对象

如何解决《使用ID作为名称从json对象创建强类型c#对象》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法识别的命令行选项"-std = c ++ 11"

如何解决《无法识别的命令行选项"-std=c++11"》经验，为你挑选了1个好方法。 ... [详细]
程序员
在iOS中的UITableViewCell中,setHighlighted和setSelected有什么区别？

如何解决《在iOS中的UITableViewCell中,setHighlighted和setSelected有什么区别？》经验，为你挑选了1个好方法。 ... [详细]
程序员
错误：无法完成Gradle执行。原因：未知的命令行选项“ -X”

如何解决《错误：无法完成Gradle执行。原因：未知的命令行选项“-X”》经验，为你挑选了1个好方法。 ... [详细]
程序员
在data.table上使用geosphere distm函数来计算距离

如何解决《在data.table上使用geospheredistm函数来计算距离》经验，为你挑选了1个好方法。 ... [详细]
程序员
从Python NLTK调用斯坦福NER崩溃

如何解决《从PythonNLTK调用斯坦福NER崩溃》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使$ q等待多个异步任务？

如何解决《如何使$q等待多个异步任务？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Dockerfile:将RUN指令输出到变量中

如何解决《Dockerfile:将RUN指令输出到变量中》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用node.js child_process调用python脚本

如何解决《使用node.jschild_process调用python脚本》经验，为你挑选了1个好方法。 ... [详细]
程序员
Pyspark RDD首先收集163排

如何解决《PysparkRDD首先收集163排》经验，为你挑选了1个好方法。 ... [详细]
程序员
Android蓝牙低功耗代码兼容API> = 21 AND API <21

如何解决《Android蓝牙低功耗代码兼容API>=21ANDAPI<21》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在python中获取SQL查询的表列名/标题

如何解决《如何在python中获取SQL查询的表列名/标题》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Python的scikit-learn中访问树深度？

如何解决《如何在Python的scikit-learn中访问树深度？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Linq反向字符串c#

如何解决《Linq反向字符串c#》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何匹配Rust宏中表达式的类型？

如何解决《如何匹配Rust宏中表达式的类型？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Python:只保留字符串中的字母

如何解决《Python:只保留字符串中的字母》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何在石墨/ grafana中查询"all but one"

如何解决《如何在石墨/grafana中查询"allbutone"》经验，为你挑选了1个好方法。 ... [详细]
程序员
如果bool数组中的所有元素都为真？

如何解决《如果bool数组中的所有元素都为真？》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何删除字符串末尾的换行符？

如何解决《如何删除字符串末尾的换行符？》经验，为你挑选了1个好方法。 ... [详细]
程序员
XPages REST服务和外部系统身份验证

如何解决《XPagesREST服务和外部系统身份验证》经验，为你挑选了1个好方法。 ... [详细]