Question

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

我正在使用angular 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>

Answer 2

Produkt不再是一个数组，它是一个对象。

删除索引j并直接访问它。

<td>{{ produkt.bezeichnung }}</td>

Answer 3

似乎是这一行的问题，其中对象上没有produkte

<tr *ngFor="let produkt of data[i].produkte; let j = index">

你可以这样做

<tr *ngFor="let produkt of number.produkte; let j = index">

并且如果您在第一个循环number中将值存储在<div class="card" *ngFor="let number of data; let i = index">中而不是您不需要data[i]，则只需要使用number。

我还建议您使用json并检查传递的值以确定您传递的内容是否正确，因为这样做会在您的页面上执行此操作

{{data|json}}

这将告诉您传递的对象是什么，produkte是否存在于对象上。

请使用*ngIf

检查产品数组是否存在

 <div class="card-body" *ngIf="number.produkte">

在产品阵列上运行循环之前。

还可以使用?（如下所示）检查每个属性的null或undefined

 <div class="card" *ngFor="let number of data; let i = index">
            <div class="card-header">
                {{ number?.obm }} -
                {{ number?.tsnr }} -
                {{ number?.tsname }} -
                {{ number?.tsort }}
                <s

Answer 4

一切都很好，只需一行改变 -

<tr *ngFor="let produkt of data[i].produkte[j]; let j = index">

因为，数组是多维的，你错过了第二次迭代的循环索引。干杯！

但我的建议是你使用这个HTML -

<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 number.produkte; let j = index">
                            <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>

以角度查看数组的一部分

4 个答案: