如何使用角度的nz-radio-group显示和隐藏其他项目

Question

代码如下：

list.component.html

   <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
                  <label nz-radio nzValue="passed">Passed</label>
                  <label nz-radio nzValue="failed">Failed</label>
                </nz-radio-group>
 <div>
              <textarea nz-input class="remarks-textarea" type="text" name="otherRemark" formControlName="remark" [(ngModel)]="otherRemark"
                [nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
            </div>

如何show拥有div的{​​{1}}，当在textarea中选择radio button时它将显示{{1} }点击failed。

预先感谢

Answer 1

您可能会尝试在div上添加* ngIf条件

<div *ngIf="radioValue === 'failed'">

Answer 2

请在下面的图片中找到所有formcontrol和（ngModelChange）。

我认为初始化存在一些问题。如果您可以详细说明代码，从而可以帮助您进一步检查。

谢谢。

Answer 3

使用类似下面的示例：

HTML：

 PASS  src/stackoverflow/59281612/index.spec.tsx
  TestContainer
    ✓ should pass (13ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.037s, estimated 11s

组件ts：

<form [formGroup]="radioForm">
 <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
                  <label nz-radio nzValue="passed">Passed</label>
                  <label nz-radio nzValue="failed">Failed</label>
                </nz-radio-group>
 <div *ngIf="radioValue === 'failed'">
              <textarea nz-input class="remarks-textarea" type="text" name="otherRemark" formControlName="remark" [(ngModel)]="otherRemark"
                [nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
    </div>
</form>

您也可以使用import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { radioForm = new FormGroup({ radiostatus: new FormControl(''), remark: new FormControl('') }); onChangeStatus($event){ console.log($event); } } 之类的符号代替[hidden]="radioValue !== 'failed'"

WORKING DEMO