Div 使用 *ngIf 无法显示

Question

我是 Angular 4 的新手，正在尝试根据下拉菜单的选择显示一组不同的文本框。但是，div 没有显示到 UI 。请帮忙。下面是我的 html 以及打字稿文件。

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;}
  }
}

Answer 1

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

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

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

Answer 2

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

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>

Div 使用 *ngIf 无法显示

Div not getting displayed using *ngIf

html

css

mean-stack

angular

angular4-forms