首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >显示/隐藏部分角5

显示/隐藏部分角5
EN

Stack Overflow用户
提问于 2018-03-23 12:49:55
回答 2查看 1.2K关注 0票数 0

Componet.ts

代码语言:javascript
复制
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

代码语言:javascript
复制
<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表单。如果这有区别的话,请参阅plnkr不起作用

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-23 12:55:25

您应该获得表单值,现在您正在检查组件属性。

代码语言:javascript
复制
<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>
票数 3
EN

Stack Overflow用户

发布于 2018-03-23 12:50:58

在检查字符串时应使用===,该字符串也将检查类型

代码语言:javascript
复制
  <div *ngIf=" type === 'HTC' " class="form-group">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49450068

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档