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

时间:2021-03-26 11:53:31

标签: angular typescript ionic-framework

我有一个数组:

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'

3 个答案:

答案 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 也代表当前迭代数据,其中还包含您的 titlesubtitle

因此,您可以使用包含在上述迭代变量中的数据,而不是使用数组索引获取 titlesubtitle

这里不知道你为什么要获取当前的索引副标题,但我在这里添加了demo和你的要求

<app-toggle-element *ngFor="let element of content; let i = index" [title]="element.title" [subtitle]="element.subtitle[i]" >
</app-toggle-element>

Stackblitz Demo