Question

我有一个组件，它获取由模型（类）定义的对象数组。在模板中，我想从类实例数组中显示元素的属性，但我无法访问它。

//model.ts
class Model { a_text : String; } 

//app.ts
import Model from './model'

@Component({
 selector:'test'
 template: `
   <div> {{ a[1].a_text }} </div>     <- this fails
   <div> {{ b.a_text }} </div>        <- this does not fail
 `
})
export class X {
  a : A[] = [];
  b : A = new A;
  constructor(){
    fetch data to a;
    b=a[1];
  }
}

这对我不起作用，我不确定我是做错了还是不可能。我收到以下错误：

template:line:number caused by: Cannot read property 'a_text' of undefined`

如果我使用单个辅助对象，例如：

b : A = new A ; 
b = a[1] ;

并在模板中：

<div> {{ b.a_text }} </div>

它运行正常，没有任何错误。

a数组填充了对象（A的实例），我可以在控制台中看到它们。如果我尝试仅在模板中显示{{ a[0] }}，我会显示[Object object]，它会出现

我想知道在声明数组时我是否做错了。

*编辑问题（代码）

是否可以从类实例数组中访问元素的属性？

Answer 1

您必须首先确认数组a中有两个元素。可能会推荐*ngFor或只是在显示之前检查长度。

<div *ngIf="a.length > 1"> {{ a[1].a_text }} </div>

因为您正在使用asynchronous电话，我认为您应该使用ngZone.run或async管道在您获取数据后让角度重新渲染。

我建议将初始化（获取数据）从constructor移至ngOnInit。

其他

我为你快速example。也许你可以找到不同的部分。

是否可以在模板中访问Angular2中模型/类数组的属性？

1 个答案: