Динамически Показать / Скрыть поле ввода на основе ответа службы

Question

У меня есть сценарий, в котором, если я нажимаю переключатель, изначально присутствуют 5 текстовых полей ввода. Но когда я нажимаю переключатель, будет отправлен запрос на обслуживание, и на основе ответа мне нужно скрыть некоторые из нежелательных текстовых полей.

Пример:

<input id="1" [(ngModel)]="name"></input>
<input id="2" [(ngModel)]="dob"></input>
<input id="3" [(ngModel)]="city"></input>
<input id="4" [(ngModel)]="state"></input>
<input id="5" [(ngModel)]="country"></input>

Ответ службы:

{
"id": 1,
"value": "First",
},
{
"id": 2,
"value": "Second",
}

Так что теперь мне нужно скрыть все элементы ввода, кроме id = 1 и 2.

Я попробовал этот подход, и он также работает

<div *ngFor="let res of response">
<input id="1" *ngIf="res.id===1" [(ngModel)]="name"></input>
<input id="2" *ngIf="res.id===2" [(ngModel)]="dob"></input>
<input id="3" *ngIf="res.id===3" [(ngModel)]="city"></input>
<input id="4" *ngIf="res.id===4" [(ngModel)]="state"></input>
<input id="5" *ngIf="res.id===5" [(ngModel)]="country"></input>
</div>

Но этот подход кажется не идеальным, поскольку имеет место ненужное зацикливание.

Есть ли лучший способ удовлетворить мою потребность?

P.S: id атрибут здесь просто заполнитель

Answer 1

Вы можете напрямую достичь этого, зациклив input. Каждый раз, когда переменная response получает новые значения, она автоматически обновляет dom

<input *ngFor="let res of response" id="{{res.id}}"></input>

Хорошо. Поскольку вы отредактировали свой код, и теперь кажется, что только итерация элемента не будет работать. Ваш нынешний подход неплох для этого, но я могу предложить другой подход.

<input *ngFor="let res of response" id="{{res.id}}" [(ngModel)]="binding[res.id]"></input>

и в ваших привязках вы можете иметь массив вроде

let binding = [1:"name",2:"dob",3:"city",4:"state",5:"country"]