Mat Select 多组选定值答案

【问题标题】：Mat Select multiple set selected valueMat Select 多组选定值
【发布时间】：2021-12-24 01:36:24
【问题描述】：

我想设置列表中的一些项目在我打开列表时被选中。

我的页面：

目标页面：

html

          <mat-form-field
            appearance="fill"
            color="accent"
            class="w-100 ps-lg-4 ps-0"
          >
            <mat-label>Applicativo Di Vendita</mat-label>
            <mat-select
              [formControl]="applicativoDiVenditaControl"
              multiple
              required
              (closed)="selectOnClose()"
            >
              <mat-select-trigger>
                {{
                  applicativoDiVenditaControl.value
                    ? applicativoDiVenditaControl.value[0]
                    : ""
                }}
                <span
                  *ngIf="applicativoDiVenditaControl.value?.length > 1"
                  class="additional-selection"
                >
                  (+{{ applicativoDiVenditaControl.value.length - 1 }}
                  {{
                    applicativoDiVenditaControl.value?.length === 2
                      ? "altro"
                      : "altri"
                  }})
                </span>
              </mat-select-trigger>
              <mat-option *ngIf="applicativoDiVenditaList.length <= 0" disabled
                >Nessun Elemento</mat-option
              >
              <mat-option
                *ngFor="let applicativoDiVendita of applicativoDiVenditaList"
                [value]="applicativoDiVendita.value"
                >{{ applicativoDiVendita.value }}</mat-option
              >
            </mat-select>
            <mat-error *ngIf="applicativoDiVenditaControl.invalid">{{
              getRequiredErrorMessage()
            }}</mat-error>
          </mat-form-field>

applicativoDiVenditaControl: FormControl;
applicativoDiVenditaList: IdValueObj[] = [];

constructor(
    @Inject(MAT_DIALOG_DATA) public product: productClass,
    public dialogRef: MatDialogRef<CatalogoProdottiComponent>,
    private productCharService: ProductCharService,
  ) {
this.applicativoDiVenditaControl = new FormControl('', Validators.required);
this.getSalesApplication();
    }

getSalesApplication() {
    this.productCharService.getChar('sales').subscribe(
      (data) => {
        this.applicativoDiVenditaList = data;
      },
      (error) => {
        console.log(error);
      }
    );
  }

我尝试使用 [(ngModel)] amd 使用[compareWith]="comparer"，但不起作用

我试过这个 StackBlitz，但也不起作用 https://stackblitz.com/edit/angular6-mat-select-with-obj-default-value?file=app%2Fselect-multiple-example.html

角度版本 12.2.3

【问题讨论】：

标签： html angular typescript angular-material

【解决方案1】：

在 TS 上

export class YourForm{
  selectedValue: string[]=['0','1']

  yourValues= [
    {value: '0', viewValue: 'Value 0'},
    {value: '1', viewValue: 'Value 1'},
    {value: '2', viewValue: 'Value 2'}
  ];
}

在 HTML 上

<mat-form-field>
    <mat-select placeholder="Your options" [(ngModel)]="selectedValue" name="values" multiple>
      <mat-option *ngFor="let v of yourValues" [value]="v.value">
        {{v.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>

【讨论】：