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

声明模板变量并在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>

Answer 2

始终建议将您的成员变量声明为方法

private func bridge<T: AnyObject>(obj : T) -> UnsafeRawPointer {
    let pointer = Unmanaged.passUnretained(obj).toOpaque()
    return UnsafeRawPointer(pointer)
}

let viewPointer = UnsafeMutableRawPointer(mutating: bridge(obj: view))
linphone_core_set_native_video_window_id(theLinphone.lc, viewPointer)
let previewPointer = UnsafeMutableRawPointer(mutating: bridge(obj: previewStream))
linphone_core_set_native_preview_window_id(theLinphone.lc, previewPointer)

不使用* ngIf显示Div

2 个答案: