Question

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

这样的数据

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

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

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

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

模型数组只是组件中this question/answer

的变量

Answer 1

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

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;
      });
    });
  }
}

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

1 个答案:

ngOnChanges

订阅