Angular 角度材质选择-预选多个值

在我的例子中，angular的角色是从API接收JSON实体，并将其值分配给

FormGroup

。 一切正常（

FormGroup

包含所有预期值），但

mat select

不会直观地预选给定值

前面描述的所有功能都包含在

onInit（）方法中

产品组更新.component.ts:
完整代码：

请记住，
availableProducts
和
toSelect
中的产品是不同的对象。因此，即使它们具有所有相同的属性，它们仍然是不同的实例，这意味着对对象的比较将返回一个false-这就是为什么它们没有被选中

您可以使用两种不同的方法修复它：

mat select
支持
compareWith
功能，因此您可以覆盖默认比较，并通过Id进行比较。有关其工作原理，请参阅官方角度文档。本文还提供了一个例子
使用rxjs组合两个API调用，并确保您的
toSelect
是
availableProducts
表中对象的实际实例
在Angular中，当使用subscribe时，您无法确保数据在呈现页面之前到达，要检查这是否是问题，您可以建立一个解析器，以便组件的呈现等待数据，或者尝试包含mat select a*ngIf=“this.toSelect”
export class ProductGroupUpdateComponent implements OnInit {
  NO_PRODUCT: string = 'No product';
  editProductGroupForm: FormGroup;
  id: number;
  isFormSubmitted = false;
  availableProducts: Product[];
  toSelect: Product[];
 
  constructor(
    private formBuilder: FormBuilder,
    private productGroupService: ProductGroupService,
    private productService: ProductService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location,
 
  ) {
  }
 
  ngOnInit(): void {
    this.editProductGroupForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(100)]],
      description: ['', [Validators.required, Validators.maxLength(100)]],
      products: ['', []],
    });
 
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = +params.get('id');
      this.productGroupService.getProductGroupById(this.id).subscribe(
        receivedProductGroup => {
          this.toSelect = receivedProductGroup.products;
          this.editProductGroupForm.setValue({
            name: receivedProductGroup.name,
            description: receivedProductGroup.description,
            products: receivedProductGroup.products,
          });
        }
      );
    });
    console.log(this.editProductGroupForm)
 
    this.productService.getAllProducts(new Page<Product>()).subscribe(response => {
      this.availableProducts = response.content;
    });
  }
 
  ...

}

<div class="col-md-12">
  <div class="card card-container">
 
    <form (ngSubmit)="submitForm()" [formGroup]="editProductGroupForm" class="new-obj-form" id="register-form">
      

      ...

 
      <mat-form-field appearance="fill" class="example-full-width">
        <mat-label>Products</mat-label>
        <mat-select formControlName="products" multiple [(value)]="toSelect">
          <mat-option [value]="NO_PRODUCT">{{NO_PRODUCT}}</mat-option>
          <mat-option *ngFor="let product of availableProducts" [value]="product">
            {{product.name}}
            <i><small>(ID: {{product.id}})</small></i>
          </mat-option>
        </mat-select>
      </mat-form-field>
 

    ...
 

    </form>
  </div>
</div>

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  groupId: number;
  sold: boolean;
}


import {Product} from "./product";

export interface ProductGroup {
  id: number;
  name: string;
  description: string;
  products: Product[];
}