Question

我如何实现以下目标：

<mat-select formControlName="ctrlName">
    <mat-option *ngFor="let opt of options" [value]="opt.key">
        {{opt.label}}
    </mat-option>
</mat-select>

<div *ngIf=" SHOW IF A CERTAIN OPTION FROM THE LOOPED LIST ABOVE IS SELECTED "></div>

该组件的样本列表：

options = [
    { key: 'keyOne', label: 'Key One 1' },
    { key: 'keyTwo', label: 'Key One 2' },
    { key: 'keyThree', label: 'Key One 3' }
]

Answer 1

HTML

添加RECENT QUOTE TABLE: suppid group min mid high 1 1 200 400 600 2 1 300 500 700 3 1 100 300 500 [4] [1] 50 [150] 300 5 2 1000 3000 5000 6 2 3000 5000 8000 7 2 2000 4000 6000 8 2 1250 3125 5578 LOWEST QUOTE TABLE: suppid group min mid high 4 1 50 150 300

如果条件基于值/键，则添加

[(ngModel)]="selectedCtrlName"

TS

*ngIf="selectedCtrlName === opt_key"

最终结果

selectedCtrlName: any;

您的情况应该是

<mat-select formControlName="ctrlName" [(ngModel)]="selectedCtrlName>
    <mat-option *ngFor="let opt of options" [value]="opt.key">
        {{opt.label}}
    </mat-option>
</mat-select>

<div *ngIf="selectedCtrlName === 'opt_key'"></div>

请注意，<div *ngIf="selectedCtrlName === 'keyTwo'"></div>是选项的值，可以是数字，字符串等。

Answer 2

根据角材料网站（example here），您需要将[formControl]="selected"添加到mat-select组件中。

   <mat-select [formControl]="selected">
        <mat-option *ngFor="let opt of options" [value]="opt">
            {{option.label}}
        </mat-option>
    </mat-select>

    <div *ngIf="selected===<your_specific_value>"></div>

Answer 3

您可以尝试使用此解决方案

我已在 Stackitz

上创建了一个演示

Component.html

<form [formGroup]="myForm">
    <div formGroupName="ctrlName">
        <mat-select formControlName="key">
            <mat-option *ngFor="let opt of options" [value]="opt.key">
                {{opt.label}}
            </mat-option>
        </mat-select>


        <div *ngIf="myForm.get('ctrlName').value.key=='keyOne'">First Selection</div>

        <div *ngIf="myForm.get('ctrlName').value.key=='keyTwo'">First Selection</div>


    </div>
</form>


<div *ngIf="selectedData && selectedData.key=='keyOne'">First Selection</div>

Component.ts

myForm: FormGroup;
  options = [
    { key: 'keyOne', label: 'Key One 1' },
    { key: 'keyTwo', label: 'Key One 2' },
    { key: 'keyThree', label: 'Key One 3' }
  ]

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.myForm = this.fb.group({
      ctrlName: this.fb.group({
        key: ['keyTwo', Validators.required],
        label: ['Key One 2'],
      })
    });
  }

Answer 4

由于使用了formControls，我不得不引用整个表单并指定值：

*ngIf="form.value.specValue == 'valueName'"

角度-基于mat-select选项的条件元素

4 个答案: