更新

Question

我有一个mat-select，它由两个选项“个人客户”和“组织客户”组成。如果从下拉列表中选择Ind Cust，则应该看到三个选项名，姓氏和客户ID。但是，如果选择“组织客户”，则应该可以看到组织名称和组织ID。我已经准备好所有HTML代码，但是无法根据选择显示选项。

HTML代码：

<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
  <mat-option value="indCust">IndividualCustomer</mat-option>
  <mat-option value="orgCust">Organizational Customer</mat-option>
</mat-select>
</mat-form-field>
<div class="row" *ngIf="indCust; orgCust">
// Code for Input Box of Individual Customer
</div> 
<ng-template #orgCust > 
//Code for dropdown of Organization Customer
</ng-template>

打字稿代码

  selected = '';
  indCust: Boolean ;
  if(this.selected == 'indCust'){
  this.indCust = true;
  } else {
  this.indCust = false;
  }

有人可以向我解释我做错了什么，并帮助我找出正确的做法。

Answer 1

我会这样：

HTML代码：

<mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj"> {{obj.viewValue}}</mat-option>
    </mat-select>
</mat-form-field>

<span *ngIf="isSelected">
<div class="row" *ngIf="indCust">
    Code for Input Box of Individual Customer
   <mat-form-field class="example-full-width">
    <input matInput placeholder="Individual Customer" >
  </mat-form-field>
</div>
<div class="row" *ngIf="!indCust">
    Code for Combo Box of Organizational Customer
  <mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

</div>
</span>

TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  list: any[] = [
    { value: 'indCust', viewValue: 'IndividualCustomer' },
    { value: 'orgCust', viewValue: 'Organizational Customer' }
  ];


  foods: any[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];

  isSelected: boolean = false;
  indCust: Boolean = undefined;

  get(data) {
    this.isSelected = true;
    if (data.value == 'indCust') {
      this.indCust = true;
      console.log(data)
    } else {
      this.indCust = false;
    }
  }
}

Stackblitz

Answer 2

艾哈迈德（Ahmed），请尝试以下操作。

TS组件

sO = true;
boolOptions = [
    { Text: 'indCust', value: true },
    { Text: 'orgCust', value: false }
  ];

HTML

<mat-select [(ngModel)]="sO" name="sO" #sO="ngModel" placeholder="Option">
   <mat-option [value]="boolOption.value" *ngFor="let boolOption of boolOptions">{{boolOption.Text}}</mat-option>
</mat-select>

更新

要访问用户选择的值，请在您要使用的位置执行this.sO。

如何显示基于Mat-Select选项的输入框

2 个答案:

更新