根据选中的 mat-radio-button 显示元素

Question

我在弄清楚如何根据选择的单选按钮显示和隐藏元素时遇到问题。这是我目前所拥有的伪代码：

  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
  <h1 *ngIf="buttonA === '0'">Button A is selected</h1>
  <h1*ngIf="buttonB=== '1'">Button B is selected</h1>

选中单选按钮 A 后，它应该会显示“按钮 A”h1。选择按钮 B 时，它应该显示“按钮 B”h1，同时消失“按钮 A”h1，反之亦然。

我的假设是两个 h1 标签都需要 ngIf 以便根据选中的复选框知道何时出现/消失。

Answer 1

我不知道 mat-radio-button 具体如何工作，但是，通常单选按钮设置一个可以检查的公共值。我在您的代码中没有看到任何设置值 buttonA 或 buttonB 的内容。所以我希望您看不到任何一个 h1 元素。

您需要检查设置的任何字段 `[value]="0" 和 [value]="1"。

快速浏览一下，您可能会使用 mat-radio-group 来包含按钮，请参阅

https://material.angular.io/components/radio/overview#radio-groups

Radio groups Radio-buttons should typically be placed inside of an unless the DOM structure would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a value property that reflects the currently selected radio-button inside of the group.

Individual radio-buttons inside of a radio-group will inherit the name of the group.

这里的关键部分是“radio-group 的值属性反映了组内当前选择的 radio-button”

这是您要与 *ngIf 语句进行比较的值。所以像这样

<mat-radio-group [value]="selectedValue">
    <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
    <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

Answer 2

这里基本上有两种选择。

First Approach (Using ngModel)

在 mat-radio-group 上使用 ngModel 本质上使组件变量与模板保持同步。你可以这样做

something.component.html

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

并在something.component.ts中声明变量

selectedValue: number;

Second Approach (using change event)

something.component.html

<mat-radio-group (change)="onChange($event)">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

每当更改单选组内单选按钮的任何选择时，都会触发更改事件。调用函数 onChange.

something.component.ts

export class Something {
  selectedValue: number;

  onChange(event: MatRadioChange) {
    this.selectedValue = event.value;
  }
}

onChange函数基本上是将选中的值赋给selectedValue变量

尽管如果您不想使用 mat-radio-group，您可以在 mat-radio-button 级别捕获更改事件，但我不推荐它。您必须为添加的每个 mat-radio-button 捕获更改事件。通常将 mat-radio-group 括起来被认为是最佳做法。

根据选中的 mat-radio-button 显示元素

Showing elements depending on which mat-radio-button is checked

angular-material

angular