根据条件循环响应对象 angular 5

Question

我有一个我想循环的休息回复，但根据条件，这是我的回复：

{
    "veichleType": "SUV",
    "veichleBrand": "BMW",
    "veichleModels": [{
            "veichleModel": "M3",
            "property1": "value",
            "property2": "value",
            "property3": "value"
        },
        {
            "veichleModel": "M1",
            "property": "value",
            "property2": "value",
            "property3": "value"
        }
    ]
}

我想在 UI 中仅显示一个基于 veichleModel 的对象，如果用户通过 M3 搜索然后在 table 中显示该对象响应，否则显示 M1。

<table>
<thead>
headings here
</thead>
<tbody *ngIf='serviceResponse.veichleModels'>
<tr *ngFor="let veichleModel of serviceResponse.veichleModels">
<td>{{veichleModels.property1}}</td>
<td>{{veichleModels.property2}}</td>
<td>{{veichleModels.property3}}</td>        
</tbody>
</table>

Answer 1

你需要在这里做两件事:

添加一些变量来存储所选模型M1或M3
在循环中添加条件以显示各个对象属性（利用ng-container）

这样做，您可以将数组扩展到 100 个或更多对象

模板

<tbody *ngIf='serviceResponse.veichleModels'>
        <tr *ngFor="let veichle of serviceResponse.veichleModels">
            <ng-container *ngIf="veichle.veichleModel == selected">
                <td>{{veichle.property1}}</td>
                <td>{{veichle.property2}}</td>
                <td>{{veichle.property3}}</td>
            </ng-container>
        </tr>
</tbody>

ts 文件

export class AppComponent  {
  selected = 'M1';
  serviceResponse = {"veichleModels": [{
            "veichleModel": "M3",
            "property1": "M3val1",
            "property2": "M3val2",
            "property3": "M3val3"
        },
        {
            "veichleModel": "M1",
            "property1": "M1val1",
            "property2": "M1val2",
            "property3": "M1val3"
        }
    ]}
}

根据条件循环响应对象 angular 5

Loop over response objects based on condition angular 5

angular-ng-if

ngfor

angular5