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

前端之家收集整理的这篇文章主要介绍了html-如何显示基于Mat-Select选项的输入框 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个席位选择,其中包括两个选项:个人客户和组织客户.如果从下拉列表中选择Ind Cust,则应该看到三个选项名,姓氏和客户ID.但是,如果选择“组织客户”,则应该可以看到组织名称和组织ID.
我已经准备好所有HTML代码,但是无法基于选择显示选项.

HTML代码

  1. <mat-form-field>
  2. <mat-label>Select an option</mat-label>
  3. <mat-select [(value)]="selected">
  4. <mat-option value="indCust">IndividualCustomer</mat-option>
  5. <mat-option value="orgCust">Organizational Customer</mat-option>
  6. </mat-select>
  7. </mat-form-field>
  8. <div class="row" *ngIf="indCust; orgCust">
  9. // Code for Input Box of Individual Customer
  10. </div>
  11. <ng-template #orgCust >
  12. //Code for dropdown of Organization Customer
  13. </ng-template>

打字稿代码

  1. selected = '';
  2. indCust: Boolean ;
  3. if(this.selected == 'indCust'){
  4. this.indCust = true;
  5. } else {
  6. this.indCust = false;
  7. }

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

@H_404_22@最佳答案
我会这样:

HTML代码

  1. <mat-form-field>
  2. <mat-label>Select an option</mat-label>
  3. <mat-select>
  4. <mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj"> {{obj.viewValue}}</mat-option>
  5. </mat-select>
  6. </mat-form-field>
  7. <span *ngIf="isSelected">
  8. <div class="row" *ngIf="indCust">
  9. Code for Input Box of Individual Customer
  10. <mat-form-field class="example-full-width">
  11. <input matInput placeholder="Individual Customer" >
  12. </mat-form-field>
  13. </div>
  14. <div class="row" *ngIf="!indCust">
  15. Code for Combo Box of Organizational Customer
  16. <mat-form-field>
  17. <mat-label>Favorite food</mat-label>
  18. <mat-select>
  19. <mat-option *ngFor="let food of foods" [value]="food.value">
  20. {{food.viewValue}}
  21. </mat-option>
  22. </mat-select>
  23. </mat-form-field>
  24. </div>
  25. </span>

TS代码

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'select-overview-example',templateUrl: 'select-overview-example.html',styleUrls: ['select-overview-example.css'],})
  4. export class SelectOverviewExample {
  5. list: any[] = [
  6. { value: 'indCust',viewValue: 'IndividualCustomer' },{ value: 'orgCust',viewValue: 'Organizational Customer' }
  7. ];
  8. foods: any[] = [
  9. { value: 'steak-0',viewValue: 'Steak' },{ value: 'pizza-1',viewValue: 'Pizza' },{ value: 'tacos-2',viewValue: 'Tacos' }
  10. ];
  11. isSelected: boolean = false;
  12. indCust: Boolean = undefined;
  13. get(data) {
  14. this.isSelected = true;
  15. if (data.value == 'indCust') {
  16. this.indCust = true;
  17. console.log(data)
  18. } else {
  19. this.indCust = false;
  20. }
  21. }
  22. }

Stackblitz

猜你在找的HTML相关文章