显示/隐藏章节Angular 5

Question

Componet.ts

import .....;

export class SalesComponent implements OnInit {
    salesForm: FormGroup;

    constructor ( private formBuild: FormBuilder) {}

     ngOnInit() {
      this.salesForm = this.formBuild.group({
          type : new FormControl(),
          person : new FormControl()
      });
     }
}

HTML

<form novalidate [formGroup]="salesForm">
  <div class="row">
   <div class="col-md-4">
    <div class="form-group">
     <label>MOBILE PHONES</label>
     <div class="radio">
      <label><input type="radio" formControlName="type" name="type" value="LG">LG</label>
      <label><input type="radio" formControlName="type" name="type" value="HTC">HTC</label>
     </div>

     <legend>PEOPLE</legend>
     <div class="checkbox">
      <label><input type="checkbox" formControlName="person" value="JAMES">JAMES</label>
      <label><input type="checkbox" formControlName="person"  value="JOHN">JOHN</label>
     </div>
    </div>
</div>

 <div class="col-md-4">
   <div *ngIf=" type == 'HTC' " class="form-group">
    <h1>HTC RESULT PHONES</h1>
   </div>
   <div *ngIf=" person == 'JAMES' " class="form-group">
    <h1>JAMES RESULT</h1>
   </div>
  </div>
 </div>
</form>

基本上

• 当用户选择LG我想要显示HTC结果手机
时
• 当用户选择JAMES我想要显示JAMES内容
时

我正在使用template driven表单。如果这有所作为 Please see plnkr无法正常工作

Answer 1

您应该获取表单值，现在要检查组件属性。

<div *ngIf=" salesForm.get('type').value === 'HTC' " class="form-group">
  <h1>HTC RESULT PHONES</h1>
</div>
<div *ngIf=" salesForm.get('person').value === 'JAMES' " class="form-group">
  <h1>JAMES RESULT</h1>
</div>

Answer 2

在检查字符串时，您应该使用 span ，这也会检查类型

===