首页 文章

使用动态 ngModel 绑定两个输入，默认值为 1

提问于
浏览 次
0

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

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

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

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

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

模型数组只是组件中的变量这个 question/answer

angular

1 回答

  • 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;
      });
    });
  }
}
    回复于

相关问题