在Angular2中访问嵌套的json数组

时间:2017-10-31 09:37:02

标签: json angular

我试图从angular2中的嵌套json中获取第一个对象。任何人都可以帮助我获取第一个json对象 示例Json:

var Datalist = [{"id":1,"status":"completed"},{"id":2,"status":"Not completed"},{"id":3,"status":"Not completed"}]

我的角度代码:

<ul class="list-group">
<li *ngFor="let c of Datalist"
    class="list-group-item">
    <label> {{c.status}} </label>
         <span class="pull-right">{{c.id}}</span>
</li>
</ul>

现在我得到所有3个身份和状态。我只想要第一个对象1,completed

4 个答案:

答案 0 :(得分:1)

试试这个

<ul class="list-group">
<li class="list-group-item">
    <label> {{Datalist[0].status}} </label>
         <span class="pull-right">{{Datalist[0].id}}</span>
</li>
</ul>

答案 1 :(得分:1)

如果您只需要 ngFor ,则无需使用 first item ,使用 {{1}访问第一个元素索引

0th

答案 2 :(得分:0)

您需要使用ngIf指令测试状态是否已完成:

<ul class="list-group">
<li *ngFor="let c of Datalist"
    class="list-group-item">
    <label *ngIf="c.status==='completed'"> {{c.status}} </label>
    <span class="pull-right" *ngIf="c.status==='completed'">{{c.id}}</span>
</li>
</ul>

答案 3 :(得分:0)

试试这样:

<ul class="list-group">
    <span *ngFor="let c of Datalist; let i = index; ">
        <li class="list-group-item" *ngIf="i == 0">
            <label> {{c.status}} </label>
            <span class="pull-right">{{c.id}}</span>
        </li>
    </span>
</ul>