Category Hierarchy

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

我的页面:

?

?

目标页面:

?

?

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>

TS

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)][compareWith]="comparer",但都不起作用

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

angular版本12.2.3

转载请注明出处:http://www.ydsst.com/article/20230526/1009120.html