Зацикливание объектов отклика на основе углового условия 5 - PullRequest
Новая
       23

Зацикливание объектов отклика на основе углового условия 5

0 голосов
/ 01 сентября 2018

У меня есть ответ об отдыхе, который я хочу зациклить, но в зависимости от условия, вот мой ответ: 

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

Я хочу, чтобы в пользовательском интерфейсе отображался только один объект на основе 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>

1 Ответ

0 голосов
/ 02 сентября 2018

Здесь нужно сделать две вещи:

  1. Добавить переменную для сохранения выбранной модели M1 или M3
  2. Добавить условие внутри цикла для отображения соответствующих свойств объекта (Использовать 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"
        }
    ]}
}
...