gpt4 book ai didi

javascript - 如何*ngFor 超过一组 ngModel 可绑定(bind)属性

转载 作者:行者123 更新时间:2023-11-30 11:00:11 25 4
gpt4 key购买 nike

我正在尝试将 *ngFor 用于一组相同的输入,除了输入应绑定(bind)到的属性。

<mat-form-field *ngFor="let prop of [ID, Name, Nickname]">
<input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop">
<button mat-icon-button matSuffix mat-icon-button *ngIf="propInput.value" (click)="prop='';">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>

<!-- bind test -->
<input matInput type="text" placeholder="Name Test" #propInput [(ngModel)]="Name">

prop.key 不起作用,但这是一个单独的问题。

这是联机组件:

import { Component } from '@angular/core';
import { EntitySrcService } from '../entity-src.service';

@Component({
selector: 'app-entity-table',
templateUrl: './entity-table.component.html',
styleUrls: ['./entity-table.component.less']
})

export class EntityTableComponent {

constructor(
private entitySrc: EntitySrcService
) {}

public get ID(): string {
return this.entitySrc.id;
}

public set ID(value: String) {
this.entitySrc.id = value;
}

public get Name(): string {
return this.entitySrc.name;
}

public set Name(value: String) {
this.entitySrc.name = value;
}

public get Nickname(): string {
return this.entitySrc.altName;
}

public set Nickname(value: String) {
this.entitySrc.altName = value;
}

}

在大多数情况下,这似乎按预期工作,但 [(ngModel)] 绑定(bind)似乎只读取属性而不写入它。因此,例如,如果我更新绑定(bind)测试输入,ngFor 循环中的 Name 字段会更新以匹配,但更新 ngFor 循环中的名称字段不会更新在测试中。

我在组件中使用 get/set 属性来代理到实际存储位置,但我的理解是 get/set 属性应该起到相同的作用作为普通属性(并且使用普通属性具有相同的单向绑定(bind)行为)。

那么我该如何正确地迭代一组我想绑定(bind)的属性呢?

最佳答案

数组 [ID, Name, Nickname] 包含三个属性的值,而不是它们的引用。双向绑定(bind)将修改数组项而不是原始属性(要使其工作,您必须通过索引引用项并通过索引跟踪数组,如 this answer 所示)。

要实现组件属性的双向绑定(bind),您可以使用属性名称数组,并使用 this[prop] 引用每个属性:

<mat-form-field *ngFor="let prop of ['ID', 'Name', 'Nickname']">
<input [(ngModel)]="this[prop]" ... >
...
</mat-form-field>

参见 this stackblitz用于演示。

关于javascript - 如何*ngFor 超过一组 ngModel 可绑定(bind)属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58136262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com