我有一个休息响应,我想循环但基于条件,这是我的回答:
{
"veichleType": "SUV",
"veichleBrand": "BMW",
"veichleModels": [{
"veichleModel": "M3",
"property1": "value",
"property2": "value",
"property3": "value"
},
{
"veichleModel": "M1",
"property": "value",
"property2": "value",
"property3": "value"
}
]
}
我想在UI中只显示一个基于veichleModel的对象,如果用户通过M3搜索然后在表中显示该对象响应,则显示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>
你需要在这里做两件事:
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"
}
]}
}