Question

我想访问来自我的json文件的对象内部的数组以填充我的下拉列表值，并且只想从先前选择的下拉列表中显示第二个下拉列表中的值。

这是我的ts：

 companySites = false;
  siteSelected = false;
  alldata: any = [];
getCustomerData() {
    this.maintenanceServices.getAllCustomers().subscribe(
      data => {
        if (data) {
          this.alldata = data;
          console.log(this.alldata);
        }
      },
      error => {
        console.log(error);
      }
    );
  }

  onCustomerChange(): void {
    this.companySites = true;
  }

  onSitecChange(): void {
    this.siteSelected = true;
  }

.html：

<mat-grid-tile>
      <div>
        <p>Select a company</p>
        <mat-form-field>
          <mat-select placeholder="Company" (selectionChange)="onCustomerChange($event)" value="company">
            <mat-option *ngFor="let company of alldata">
              {{ company.customer.customerName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile *ngIf="companySites">
      <div>
        <p>Select site</p>
        <mat-form-field>
          <mat-select placeholder="Sites" (selectionChange)="onSitecChange($event)" value="site">
            <mat-option *ngFor="let site of alldata.sites; index as i">
              {{ site.buildingName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
  </mat-grid-list>

和json：

"customer": {
"customerName": "ABC",
"customerAddress": "NYC",
"BillingAddress": "ABC",
"ProductInstallation": "drive A",
"sites": [
{
"_id": "5c5be1f2b73bc81dd404ac00",
"buildingName": "Main Building",
"requestDate": "12/02/2019",
"buildingAddress": "123 Street",
"numberofDrives": "3"
},
{
"_id": "5c5be1f2b73bc81dd404abff",
"buildingName": "second Building",
"requestDate": "12/02/2019",
"buildingAddress": "123 Street",
"numberofDrives": "2"
}
]
},
"_id": "5c5be1f2b73bc81dd404abfe",

现在我的json有数百个拥有多个站点的客户。我要选择公司，然后在第二个下拉菜单中显示所选网站的网站

我尝试过：

Object.values，但这也不起作用

Answer 1

因此，您可以做的是使用第一个下拉列表来过滤对象列表并仅在用户选择了一个值时才显示第二个下拉列表，这是通过*ngIf完成的，并显示了相应的站点相同的，请参考下面的堆栈闪电。

<mat-grid-list cols="1">
    <mat-grid-tile>
        <div>
            <p>Select a company</p>
            <mat-form-field>
                <mat-select placeholder="Company" [(value)]="company">
                    <mat-option *ngFor="let company of alldata" [value]="company.customer">
                        {{ company.customer.customerName }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </mat-grid-tile>
    <mat-grid-tile *ngIf="company">
        <div>
            <p>Select site</p>
            <mat-form-field>
                <mat-select placeholder="Sites" [(value)]="site">
                    <mat-option *ngFor="let site of company.sites; index as i" [value]="site">
                        {{ site.buildingName }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    <div>{{site | json}}</div>
    </mat-grid-tile>
</mat-grid-list>

StackBlitz

Answer 2

为此只需使用*ngIf

      <mat-select placeholder="Sites" (selectionChange)="onSitecChange($event)" value="site">
        <ng-container *ngFor="let site of alldata.sites; index as i">
           <mat-option *ngIf="whatever site should be">
              {{ site.buildingName }}
           </mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>

Angular 4填充仅匹配值的下拉列表

2 个答案: