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是对的。

角度4（单击）不会在* ngIf内部触发

2 个答案: