我有一个球员名单,我通过引入一个布尔标志来显示各个玩家的详细信息(isPlayerSelected)。此方法的一个缺点是页面响应速度慢(当有更多数量的项目时),因为它必须使用patchValue更新每个formGroup中的布尔标志。有没有更好的方法来代替引入布尔标志?
请帮助。我已经附上了StackBlitz链接以及
selectPlayer(player: any) {
player.isPlayerSelected = !player.isPlayerSelected;
const selectedPlayer = this.playerDetailsControls.find(
(item) => player?.id === item.get('id')?.value
);
const otherPlayers = this.playerDetailsControls.filter(
(item) => player.id !== item.get('id')?.value
);
selectedPlayer?.patchValue({
isPlayerSelected: true,
});
otherPlayers.map((item) => {
item?.patchValue({
isPlayerSelected: false,
});
});
}
HTML语言
<form [formGroup]="form">
<div formArrayName="playerDetails">
<div *ngFor="let control of playerDetailsControls; let i = index">
<div [formGroupName]="i">
<div *ngIf="control.get('isPlayerSelected')?.value">
Player Name : <input formControlName="playerName" /><br /><br />
Role: <input formControlName="role" /><br /><br />
Country: <input formControlName="country" /><br /><br />
<hr />
</div>
</div>
</div>
</div>
</form>
4条答案
按热度按时间de90aj5v1#
如果你得到了选中的播放器窗体控件,那么你可以直接在窗体中使用它
第一个
twh00eeo2#
为什么不重用现有的变量
selectedIndex
呢?你可以像(click)="selectedIndex = i"
一样设置它。然后你就可以摆脱你的整个
selectPlayer
函数。在播放器详细信息部分,您甚至不必遍历整个数组,只需根据
selectedIndex
变量直接绑定到formGroup即可。zy1mlcev3#
正如Fabian Strathaus所写的,你只需要坚持索引,用像
isPlayerSelected
这样的字段污染对象不是一个好主意,因为这将在保存时发送到服务器。我已经修改了stackblitz,作为您可以使用的示例。
eh57zj3b4#
要解决它最好是使用React形式的性质。
在这个例子中,我创建了一个“FormDetailSelected”,这个formGroup帮助我创建了一个动态的表单细节。
技术支持
有了这个逻辑,您就不需要不断地重复“is selected”条件。