如何加载具有默认值的四个角材质选择框？

Question

<div class="container-fluid">
  <div class="row mt-4">
    <div class="col-lg-3 col-md-6 col-sm-12">
      <mat-form-field color="primary" appearance="fill" class="w-100">
        <mat-label>Select Project</mat-label>
        <mat-select [(ngModel)]="selected">
          <ng-container *ngFor="let proj of dashData; let i = index">
            <mat-option *ngIf="proj.tharea == true || proj.Phase == true" [value]="proj.Project_Name"
              (onSelectionChange)="getResourcesById(proj.id, i)">{{ proj.Project_Name }}</mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
   <mat-form-field appearance="fill" class="w-100" color="primary">
        <mat-label>Select Year</mat-label>
        <mat-select  [formControl]="yearControl" (selectionChange)="selectYear($event)"  [(ngModel)]='selectedYear' >
          <mat-option  *ngFor="let data of resourcedatapro" [value]="{ year: data.year, id: data.id }">
            {{ data.year }}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
      <mat-form-field class="ml-2 w-100" appearance="fill" color="primary">
        <mat-label>Select Month</mat-label>
        <mat-select [formControl]="monthControl" (selectionChange)="selectMonth($event)">
          <mat-option *ngFor="let object of getMonth; let i = index" [value]="object">
            {{ object }}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
      <mat-form-field class="ml-2 w-100" appearance="fill" color="primary">
        <mat-label>Demand Type</mat-label>
        <mat-select (selectionChange)="selectDemandType($event)" [formControl]="demandControl" [(ngModel)]="obj">
          <mat-option *ngFor="let object of demandType; let i = index" [value]="object">{{ object }}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</div>

如上所示，我已经为下拉菜单设计了一个模板。我的目标是使用默认值加载所有下拉列表，但它实际上并没有使用默认值进行初始化。我尝试设置ngModel 并使用FormControl#setValue。我试图在 ngOnInit 生命周期方法和 ngAfterViewInit 生命周期方法中设置值。我正在从不同的 JSON 对象获取数据。

Answer 1

您可以将每个下拉菜单与<mat-select [(ngModel)]="project"> 这样的一个属性绑定，同时您可以在<mat-option> 中迭代您的数据集 像这样<mat-option *ngFor="let data of yearArray" [value]="year">。要具有预定义的值，您可以将数据集中的值之一分配给绑定的属性。

.ts 文件

export class AppComponent {
  project = "project1";
  year = "2018";
  month = "Jan";
  demand = "cash";

  projectArray = ["project1", "project2", "project3"];
  yearArray = ["2018", "2019", "2020"];
  monthArray = ["Jan", "Feb", "March"];
  demandArray = ["cash", "card"];
}

.html 文件

<div class="container-fluid">
    <div class="row mt-4">
        <div class="col-lg-3 col-md-6 col-sm-12">
            <mat-form-field color="primary" appearance="fill" class="w-100">
                <mat-label>Select Project</mat-label>
                <mat-select [(ngModel)]="project">
                    <ng-container *ngFor="let proj of projectArray; let i = index">
                        <mat-option [value]="proj">{{ proj }}</mat-option>
                    </ng-container>
                </mat-select>
            </mat-form-field>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <mat-form-field appearance="fill" class="w-100" color="primary">
                <mat-label>Select Year</mat-label>
                <mat-select [(ngModel)]="year">
                    <mat-option *ngFor="let data of yearArray" [value]="year">
                        {{ data }}</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <mat-form-field class="ml-2 w-100" appearance="fill" color="primary">
                <mat-label>Select Month</mat-label>
                <mat-select [(ngModel)]="month">
                    <mat-option *ngFor="let object of monthArray; let i = index" [value]="object">
                        {{ object }}</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <mat-form-field class="ml-2 w-100" appearance="fill" color="primary">
                <mat-label>Demand Type</mat-label>
                <mat-select [(ngModel)]="demand">
                    <mat-option *ngFor="let object of demandArray; let i = index" [value]="demand">{{ object }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</div>

请参阅此demo 以获取工作示例。