将两个输入与动态 ngModel 绑定，默认值来自一个

Question

我正在尝试动态设置 ngModel 以将两个输入元素绑定在一起，同时让一个默认值来自其中一个。 我正在传递类似的数据

[
  {
     name: modelName,
     defaultValue: 'default'
  },
  {
     name: modelName
  }
]

并尝试获取绑定在一起的两个输入字段，最终都将具有该默认值。 这只是假装的数据，它的输入方式不同，这就是为什么它们都没有默认值。

我目前正在绑定如下字段（不确定如何绑定默认值）：

<div *ngFor="let data of dataArray">
  <input [(ngModel)]="models[data.name]" [name]="data.name" />
</div>

models 数组只是组件中的一个变量，脱离了this question/answer

Answer 1

您需要在组件中将models[data.name]的值设置为默认值，模型绑定和默认值才能正常工作。如果数据在组件的输入中，您可以在 ngOnChanges 中执行此操作，或者如果您从服务器请求数据，则需要在订阅 observable 时执行此操作。例子：

ngOnChanges

export class ExampleComponent implements OnChanges {
  @Input() public dataArray: { name: string, defaultValue: any }[];
  public models = {};

  ngOnChanges() {
    this.dataArray
      .filter((d) => !!d.defaultValue)
      .forEach((data) => {
        this.models[data.name] = data.defaultValue;
      });
  }
}

订阅

export class ExampleComponent implements OnInit{
  public dataArray: { name: string, defaultValue: any }[];
  public models = {};

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/some/url').subscribe((dataArray) => {
      this.dataArray = dataArray;
      this.dataArray.filter((d) => !!d.defaultValue)
      .forEach((data) => {
        this.models[data.name] = data.defaultValue;
      });
    });
  }
}