无法在typescript angular2中的组件模板中迭代对象数组

我有一个服务，它将对象返回到组件，并在模板中迭代对象，一些属性可能为null并破坏js，我如何防止这种情况发生

模板：

<table id="simple-table" class="table table-striped table-bordered table-hover">
 <caption>Table of artists</caption>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>image</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let artist of artists">

            <td>{{artist.id}}</td>
            <td>{{artist.name}}</td>
            <td><img class="img-circle" style="width:100%" src="{{artist.images[0].url}}"></td>
        </tr>
    </tbody>
</table>

艺术家表
身份证件
名称
形象
{{artist.id}
{{artist.name}

---

Artister.images[0]。url引发“无法读取未定义的属性“url”错误，因为图像为空。如何在具有级联条件的单行中修复？

您可以安全导航

。

而不是

，但不能使用

[]

这应该行得通

artists?.images && artist.images[0]?.url

或者

<table *ngIf="artists.images.length" ...

---

什么是
console.log（this.artists）
打印而不是
console.log（data）
？什么是
{artists | json}
显示？@echonax它的sam，我在订阅函数中设置断点并检查artist属性的值，加载所有对象，没有可疑的内容there@G英特斯切鲍尔什么都没有，我认为这里的绑定有问题。您可以尝试将
private cdRef:ChangeDetectorRef
添加到构造函数参数中，并在
this.artists=…]之后调用
this.cdRef.detectChanges（）
？