我有一个数组:
content = [ { title : 'Canal notifications' , subtitle: ['Notification Push','Email']} , { title : 'Canal notifications' , subtitle: ['Notification Push','Email']} ];
我想使用 ngFor 迭代这个数组:
<app-toggle-element *ngFor="let element of content; let i = index" [title]="element[i]['title']" [subtitle]="element[i]['subtitle'][i]" ></app-toggle-element>
我收到此错误:
<块引用>无法读取未定义的属性 'title'
答案 0 :(得分:0)
试试这个:
[title]="element.title"
您正在遍历数组。在 element
变量中是迭代的当前元素。
答案 1 :(得分:0)
如果你想使用你的符号应该是:
[title]="content[i]['title']
但是没有意义,因为您有 *ngFor
,并且如上一个答案所述,您应该使用:
[title]="element.title"
但是,在当前设置中,您不能动态地拥有 subtitle
数组 ['Notification Push','Email']
的两个值,因为您的 *ngFor
正在遍历每个对象而不是数组。因此,通过上述设置,您将获得:
subtitle=Notification
表示第一个对象,subtitle=Email
表示第二个对象。
考虑更改设置
答案 2 :(得分:0)
您使用了 *ngForOf
结构指令,该指令负责将您的 HTML 添加到现有 DOM 元素中。
您在 element
中继器中使用的迭代变量 *ngForOf
也代表当前迭代数据,其中还包含您的 title
和 subtitle
,
因此,您可以使用包含在上述迭代变量中的数据,而不是使用数组索引获取 title
和 subtitle
,
这里不知道你为什么要获取当前的索引副标题,但我在这里添加了demo和你的要求
<app-toggle-element *ngFor="let element of content; let i = index" [title]="element.title" [subtitle]="element.subtitle[i]" >
</app-toggle-element>