使用 *ngIf 未显示 Div答案

【问题标题】：Div not getting displayed using *ngIf使用 *ngIf 未显示 Div
【发布时间】：2018-07-23 11:58:29
【问题描述】：

我是 Angular 4 的新手，并试图根据下拉列表的选择显示一组不同的文本框。但是，div 不会显示在 UI 上。请帮忙。下面是我的 html 和 typescript 文件。

Session.html

<form #sessionForm="ngForm" (ngSubmit)="insertSession(sessionForm); sessionForm.reset();"> 
    <div class="form-group row">
        <label for="deliveryMethod" class="form-col-label col-sm-2">Mode</label>
        <div class="col-sm-6">
            <select>
                <option *ngFor="let item of dms" (click)="setNav(item)">{{item}}</option>
            </select>
        </div>
    </div>

<div  *ngIf="isSelectedmode('Physical'); then PhysicalBlock"></div>
<ng-template #PhysicalBlock>
    <div class="form-group row">
        <label for="deliveryVenue" class="form-col-label col-sm-2">Venue</label> 
        <input type="text" class="form-control col-sm-6" id="deliveryMethodDetails" name="venue" [(ngModel)]="newSession.venue" #venue="ngModel">
    </div>     
</ng-template>

<div *ngIf="isSelectedmode('VCR'); then thenBlock"></div>
<ng-template #thenBlock>
    <div class="form-group row">
        <label for="callDetails" class="form-col-label col-sm-3">Call details</label> 
        <input type="text" class="form-control col-sm-5" id="callDetails" name="callDetails" [(ngModel)]="newSession.callDetails" #callDetails="ngModel">
    </div>
    <div class="form-group row">
        <label for="participantCode" class="form-col-label col-sm-3">Particpant Code</label> 
        <input type="text" class="form-control col-sm-6" id="participantCode" name="participantCode" [(ngModel)]="newSession.participantCode" #participantCode="ngModel">
    </div>
    <div class="form-group row">
        <label for="webexLink" class="form-col-label col-sm-3">Webex Link</label> 
        <input type="text" class="form-control col-sm-6" id="webexLink" name="webexLink" [(ngModel)]="newSession.webexLink" #webexLink="ngModel">
    </div>
</ng-template>

Session.ts

export class SessionComponent implements OnInit {
  constructor(
    private dataService:DataService) {} 

  ngOnInit() {}

  dms =['Physical','VCR']
  selectedNav: any

  setNav(nav:any){
    this.selectedNav = nav;
    if(this.selectedNav == "Physical"){
      this.regTypeSelectedOption = "Physical";}
    else if(this.selectedNav == "VCR"){
      this.regTypeSelectedOption = "VCR";
    }
  }

  isSelectedmode(name:string){
    if(!this.regTypeSelectedOption){return false;}
    else {return name===this.regTypeSelectedOption;}
  }
}

【问题讨论】：

你为什么在 *ngIf 中使用你的方法？我会在
我用同样的方法试过了，但是没用。

标签： html css angular mean-stack angular4-forms

【解决方案1】：

始终建议在方法上方声明您的成员变量

dms =['Physical','VCR']
selectedNav: any; 

constructor(
    private dataService:DataService) {} 
 ngOnInit() {}

【讨论】：

【解决方案2】：

声明模板变量并在select标签处添加change事件并将模板变量作为参数传递

session.html

<div class="form-group row">
  <label for="deliveryMethod" class="form-col-label col-sm-2">Mode</label>
<div class="col-sm-6">
  <select #s (change)="setNav(s.value)" >
<op tion *ngFor="let item of dms" >{{item}}</option>
 </select>
</div>

【讨论】：

抱歉，我没明白。这里的 s 值应该是多少
试试上面的方法你会得到想要的结果
模板引用变量是对模板中 DOM 元素或指令的引用。
嘿，谢谢它的工作。但是当页面加载时，下拉列表中的值会自动选择。但是与它对应的文本框不会在页面加载时显示。
在 dms 域中添加空字符串