Question

Angular 7 (click)事件无法使用[hidden]属性，这有什么原因吗？这是我的示例代码

<div class="autocomplete-dropdown" [hidden]="!showdeviceDropDown">
    <button *ngFor="let item of devices; let i= index" (click)="Save()" class="btn btn-danger">{{ item.serialNumber }}</button>
</div>

Answer 1

它工作正常，您可能在代码中的其他位置存在运行时错误。在浏览器中进行调试或在浏览器控制台中查看错误，以查看其为何不起作用。

Working demo code

app.component.ts

var enumerator = restrictions.GetEnumerator();
while(enumerator.MoveNext())
{   // there are still restrictions left
    RestrictionDto restriction = enumerator.Current;
    // do something with this restriction
}

app.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  numOfClicks = 0;
  showdeviceDropDown = true;
  devices = [{serialNumber: '123'}];

  Save(){
    this.numOfClicks++;
  }
}

Answer 2

使用ngIf代替hidden如下-

<div class="autocomplete-dropdown" *ngIf="showdeviceDropDown">

Answer 3

从逻辑上讲，您的代码非常好。 hidden也没有任何变化。 请确保已在组件中定义了showdeviceDropDown变量，并且正在控制台中检查输出 ，因为您在控制台上打印了点击事件。

但是，如果您想更改hidden属性，则可以尝试将其替换为[class.d-none]。所以您的脚本将是-

<div class="autocomplete-dropdown" [class.d-none]="!showdeviceDropDown">
    <button *ngFor="let item of devices; let i= index" (click)="Save()" class="btn btn-danger">{{ item.serialNumber }}</button>
</div>

建议：请对您的方法和属性使用小骆驼套。 Here 是对官方样式指南的引用。

Angular 7（单击）不适用于[hidden]属性

3 个答案: