Angular 4（點擊）內部不會觸發* ngIf

Question

我是新來的角。我在Angular 4中（點擊）遇到問題。（點擊）不會觸發。試圖尋找解決方案。什麼都沒有解決。以下是我在HTML

<div class="col col-12 col-spacing"> 
    <div> 
    <md-select [placeholder]="result" [(ngModel)]="selectedItemType"> 
    <md-option *ngFor='let attr of result' [value]="attr.fieldType" ng-selected="attr.fieldType"> {{attr.attribute}} 
    </md-option> 
    </md-select> 
    </div> 
    <div *ngIf="selectedItemType =='string' || selectedItemType =='decimal' || selectedItemType == 'text' || selectedItemType == 'integer'"> 
    <input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered"> 
    </div> 
    <div> 
    <div *ngIf="selectedItemType == 'date'" class="col col-2 col-spacing"> 
     <md-input-container class="datepicker-align"> 
     <input mdInput [mdDatepicker]="startDatepicker" placeholder="Select Date" name="StartDate" id="txtStartDate" [(ngModel)]="date" 
      #startDate> 
     <button id="btnOpnStartDate" mdSuffix [mdDatepickerToggle]="startDatepicker"></button> 
     </md-input-container> 
     <md-datepicker #startDatepicker></md-datepicker> 
    </div> 
    </div> 
    <div *ngIf="selectedItemType == 'boolean'"> 
     <input type="checkbox" /> 
    </div> 
    <button *ngIf="selectedItemType" md-raised-button (click)= "Add()" color="accent" >Add</button> 
</div> 

下面的代碼我的後端/打字稿代碼

class TestClass implements OnInit { 
    itemSelected: AttrSelectedList; 
    chkBox: boolean = false; 
    selectedItemType: string = null; 
    date: any = null; 
    test: any; 
    txtEntered: any; 
    result: Array<FormatHeader> = []; 

    constructor() { } 

    handleOnClose() { 
     this.dialogRef.close(); 
    } 
    ngOnInit(): void { here we have logic} 

    Add() { 
     this.test = this.txtEntered; 
    } 
    } 

Answer 1

格式化代碼，你將看到Add方法是外班後請給適當的縮進

export class TestClass implements OnInit { 
    itemSelected: AttrSelectedList; 
    chkBox: boolean = false; 
    selectedItemType: string = null; 
    date: any = null; 
    test: any; 
    txtEntered: any; 
    result: Array<FormatHeader> = []; 

    constructor() { } 
    handleOnClose() { 
    this.dialogRef.close(); 
    } 
    ngOnInit(): void { here we have logic} 
} 
Add() { // outside class 
    this.test = this.txtEntered; 
} 
} // unnecessary 

加入此項add方法內

Answer 2

創建plunker。點擊作品同時使用ngIf。 @Rahul Singh是對的。