以角度查看数组的一部分

Question

为了测试,我使用的是jsonstring.稍后我会通过api得到这个.目的是查看表格中的数据.构建标题的第一个循环工作正常,但是当我尝试循环抛出产品时,我得到了一个错误.

我正在使用角5

这是我的jsonstring:

[{
  "obm": 1234,
  "tsnr": 12,
      "tsname": "Muster",
  "tsort": "ort",
  "lastupdate": "2018-03-12 02:00:00",
  "produkte": 
    [{
      "bezeichnung": "E10",
      "artikel": 2,
      "tankgroesse": 19005,
      "aktuell": 8450,
      "eintag": 9450,
      "dreitage": 11450,
      "siebentage": 14450
    }]
}]

这是html

<div class="container-fluid">
    <div class="card-columns">
        <div class="card" *ngFor="let number of data; let i = index">
            <div class="card-header">
                {{ data[i].obm }} -
                {{ data[i].tsnr }} -
                {{ data[i].tsname }} -
                {{ data[i].tsort }}
                <small>Stand: {{ data[i].lastupdate }} Uhr</small>
            </div>
            <div class="card-body">
                <div class="app-table-responsive">
                    <table class="table table-hover">
                        <th colspan="2">Produkt</th>
                        <th>Tankgröße
                        <th>Aktuell</th>
                        <th>-1</th>
                        <th>-3</th>
                        <th>-7</th>
                        <tbody>
                            <tr *ngFor="let produkt of data[i].produkte; let j = index">
                                <td>{{ produkt[j].bezeichnung }}</td>
                                <td>{{ produkt[j].artikel }}</td>
                                <td>{{ produkt[j].tankgroesse }}</td>
                                <td>{{ produkt[j].aktuell }}</td>
                                <td>{{ produkt[j].eintag }}</td>
                                <td>{{ produkt[j].dreitage }}</td>
                                <td>{{ produkt[j].siebentage }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

我的错误在哪里？

我得到的错误是produkt [i] .bezeichnung没有定义.但是当在console.log中查看对象时,一切都会被传递.

我试过循环了吗？

Answer 1

在HTML文件中,删除这些索引,如下所示:

<div class="container-fluid">
    <div class="card-columns">
        <div class="card" *ngFor="let number of data">
            <div class="card-header">
                {{ number.obm }} -
                {{ number.tsnr }} -
                {{ number.tsname }} -
                {{ number.tsort }}
                <small>Stand: {{ number.lastupdate }} Uhr</small>
            </div>
            <div class="card-body">
                <div class="app-table-responsive">
                    <table class="table table-hover">
                        <th colspan="2">Produkt</th>
                        <th>Tankgröße
                        <th>Aktuell</th>
                        <th>-1</th>
                        <th>-3</th>
                        <th>-7</th>
                        <tbody>
                            <tr *ngFor="let produkt of number.produkte;">
                                <td>{{ produkt.bezeichnung }}</td>
                                <td>{{ produkt.artikel }}</td>
                                <td>{{ produkt.tankgroesse }}</td>
                                <td>{{ produkt.aktuell }}</td>
                                <td>{{ produkt.eintag }}</td>
                                <td>{{ produkt.dreitage }}</td>
                                <td>{{ produkt.siebentage }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>