当我从typescript传递条件时，ngIf和hidden不是绑定属性

Question

我正在通过解析 json 文件来创建动态表单。所以我需要根据条件绑定隐藏/ngIf。我正在从打字稿文件中传递条件，并且在 html 文件中使用同样的东西。以下是我的代码更改

product.component.ts

export class ProductComponent implements OnInit {

  condition : any;
  productForm : FormGroup;

constructor(productFormBuilder : FormBuilder) {
      this.productForm = productFormBuilder.group({
          'name' : ["", [Validators.required, Validators.minLength(5), Validators.maxLength(10)]],
          'test' :["",[]],
          'middleName':["",[]],
          'lastName':["",[]]

      });

      this.condition="!(this.productForm.get('test').value==='testing')";
   }

}

product.component.html

  <form [formGroup]="productForm" (submit)="onSubmit()">
  <div>
      <label>Name</label>
      <input type="text" formControlName="name" name="name" >
      <div *ngIf="productForm.controls['name'].invalid && (productForm.controls['name'].dirty || productForm.controls['name'].touched)">
        <div style="color:red" 
            *ngIf="productForm.controls['name'].errors.required">Name is required</div>
        <div style="color:red" 
            *ngIf="productForm.controls['name'].errors.minlength">Name is minimum of 5 characters</div> 
      </div>

  </div>
  <div>
      <label>Label</label>
      <input type='radio' formControlName='test' value='testing' name='test'> Testing
      <input type='radio' formControlName='test' value='overflow' name='test'> Overflow

  </div>
  <div  [hidden]= "!(this.productForm.get('test').value==='overflow')"> 
    <label>Overflow</label>
    <input type='text' formControlName='middleName' > 

</div>
<div *ngIf="condition">
        <div  >
                <label>Testing</label>
                <input type='text' formControlName='lastName' > 
            </div>
</div>
<div [hidden]="condition">
        <div  >
                <label>Testing</label>
                <input type='text' formControlName='lastName' > 
            </div>
</div>

 <button type="submit">Submit</button>

</form>

在我的模板文件中，我有一个名为“test”的单选按钮，我需要显示基于单选按钮选择的相应div。当我将条件直接放在模板文件中时，绑定是有效的，而当我从typescript中发送它并在模板文件中使用它时，同样的事情是无效的。ngIf*在页面加载时显示右div，但切换不起作用。

由于表单将通过解析json动态创建，我需要从typescript传递条件。

有人可以帮助我吗，我错过了什么。

Answer 1

首先，条件应该是布尔类型而不是字符串。
this.condition="！（this.productForm.get（'test'）. value==='测试'）"；应该替换为
this.condition=！（this.productForm.get（'test'）. value==='测试'）；其次，您在单选中缺少更改检测。最初，它已设置，但当您更改它时，您不会更新条件。