Question

我正在更新一些旧的角度形式，并且在将形状设置为对象的整个实例时遇到了问题，同时还能够设置初始值。

我尝试在拥有[value]="option"的同时将{{ option.$type }}设置为整个对象，但是没有显示初始值。我也尝试过使用[ngValue]，但是即使导入ReactiveFormModule

也会出现错误

当前代码：

<mat-form-field fxFlex="49">
    <mat-select placeholder="Type" formControlName="type" autocomplete="off" required>
        <mat-option *ngFor="let option of container$ | async" [value]="option.$type">{{ option.$type }}
        </mat-option>
    </mat-select>
</mat-form-field>

我希望将整个容器对象作为值，以便以后可以访问option.$id，但是

this.editContainerForm.controls['type'].setValue(this.containerContext.$containerTypeName );

即使我为整个容器对象设置了表单，也会停止工作。

Answer 1

在这种情况下，对象通过引用进行比较，以便将对象用作值必须是相同的引用

这个意思

const a = {type$ : 'A'};
const a2 = {type$:'A'}; 

console.log(a === a2); // false

如果您尝试使用对象，则两个对象必须具有相同的引用

  const a = {type$ : 'A'};
  const a2 = a; 

  console.log(a === a2); // true

基本示例

  form:FormGroup;
  container$;

  data = [
      {$type:'A'},
      {$type:'B'},
      {$type:'C'},
    ]
  constructor(fb:FormBuilder) {
    this.form = fb.group({
      type:this.data[1]
    })

    this.container$ = of(this.data)
  }

您会看到type具有相同的值，请检查stackblitz demo

已更新！ ✨

您可以提供[compareWith][2]来比较选项值和所选值的功能。第一个参数是选项的值。第二个是选择的值。应该返回一个布尔值。

  compareWith(value , selectedValue ) {
    return value.$type === selectedValue.$type
  }

模板

<mat-select placeholder="Type" formControlName="type" autocomplete="off" required [compareWith]="compareWith">
    <mat-option *ngFor="let option of container$ | async" [value]="option" >{{ option.$type }}
    </mat-option>
</mat-select>

stackblitz demo

如何以Angular反应形式使用完整对象

1 个答案: