Question

我有一个数组：

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'

Answer 1

试试这个：

[title]="element.title"

您正在遍历数组。在 element 变量中是迭代的当前元素。

Answer 2

如果你想使用你的符号应该是：

[title]="content[i]['title']

但是没有意义，因为您有 *ngFor，并且如上一个答案所述，您应该使用：

[title]="element.title"

但是，在当前设置中，您不能动态地拥有 subtitle 数组 ['Notification Push','Email'] 的两个值，因为您的 *ngFor 正在遍历每个对象而不是数组。因此，通过上述设置，您将获得： subtitle=Notification 表示第一个对象，subtitle=Email 表示第二个对象。

考虑更改设置

Answer 3

您使用了 *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>

Stackblitz Demo

类型错误：无法读取角度未定义的属性“标题”

3 个答案: