angular - Angular Material Select

问题描述

在我的情况下，角度角色是从API接收JSON 实体并将其值分配给. 一切正常（包含所有预期值），但不会在视觉上预先选择给定值。FormGroupFormGroupmat-select

之前描述的所有功能都包含在onInit()方法中。

product-group-update.component.ts： 完整代码：https ://pastebin.com/hXLqBAcF

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

}

product-group-update-component.html 完整代码：https ://pastebin.com/9GqyU2r2

<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>

如您所见：editProductGroupForm包含所有值：

还有toSelect元素（mat-select 应该从中获取预选值）：

但 mat-select 不预选任何值：

其他代码：

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[];
}

标签： angulartypescriptangular-material

请记住，产品在availableProducts和toSelect是不同的对象。因此，即使它们具有所有相同的属性，它们仍然是不同的实例，这意味着对象的比较将返回错误 - 这就是它们未被选中的原因。

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

mat-select支持该compareWith功能 - 因此您可以覆盖默认比较并比较它们，例如，按 Id。有关它的工作原理，请参见此处的官方 Angular 文档。材料文档中也有一个示例。
使用 rxjs 组合您的两个 API 调用，并确保您toSelect是表中对象的实际实例availableProducts。

angular - Angular Material Select - 预选多个值

问题描述

解决方案

推荐阅读