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"]

根据服务响应动态显示/隐藏输入框

1 个答案: