來自 mat-radio 組的 angular 過濾墊收音機顯示器

Question

正如您在下面的屏幕截圖中看到的那樣，我有 2 個使用 mat 單選組的按鈕，如果 modelForm.get('schedule').value 等於“1”，則僅顯示 mat 單選組中的單選按鈕，其中值為“A” ' 否則顯示來自“A”和“B”階段的所有值。

我們如何做到這一點？ 我們如何根據值僅從循環中隱藏某些按鈕？ 謝謝。

＃截屏

#html

<mat-radio-group [disabled]="!modelForm.get('schedule').value" [(ngModel)]="stage" layout="column">
                        <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary">
                          {{ stage.text }}
                        </mat-radio-button>
                      </mat-radio-group>

#TS

  stages = [
    {id: 0, text: 'A'},
    {id: 1, text: 'B'},
  ]

Answer 1

注意：當 schedule 的值更改為1時，您需要以編程方式將stage屬性設置為'A' ，此解決方案才能正常工作！

您可以使用 html class 來隱藏和顯示。

堆棧閃電戰

<mat-radio-group
      [disabled]="!formGroup.get('password').value"
      [(ngModel)]="stage"
      [ngModelOptions]="{ standalone: true }"
      layout="column"
    >
      <mat-radio-button
        *ngFor="let stage of stages"
        [value]="stage.text"
        color="primary"
        [ngClass]="{ isHidden: isHidden(stage) }"
      >
        {{ stage.text }}
      </mat-radio-button>
    </mat-radio-group>

styles.css

.isHidden {
  visibility: hidden;
  width: 0;
}

ts

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
} from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  stages = [
    { id: 0, text: 'A' },
    { id: 1, text: 'B' },
  ];

  isHidden(stage) {
    return (
      this.formGroup.get('password').value === '1' && stage && stage.id === 1
    );
  }

Answer 2

而不是 `[hidden] 你可以使用

[style.display]="isHidden(stage)?'none':null"

另一種方法可以是

  <mat-radio-group [(ngModel)]="stage" layout="column">
     <!--always show the first you use "stages[0]"-->
     <mat-radio-button [value]="stages[0].text">
        {{ stages[0].text }}
     </mat-radio-button>

     <!--the rest show or not-->
     <ng-container *ngIf="modelForm.get('schedule').value !== '1'">
        <ng-container *ngFor="let stage of stages;let first=first"> 
           <mat-radio-button *ngIf="!first"
                [value]="stage.text" color="primary">
                          {{ stage.text }}
           </mat-radio-button>
       </ng-container>
     <ng-container>
  </mat-radio-group>