Angular 7 (щелчок) не работает с атрибутом [hidden]

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

Логически ваш код в порядке.С вашим hidden тоже нечего менять. Убедитесь, что вы определили переменную showdeviceDropDown в своем компоненте, и вы проверяете свой вывод в консоли , потому чтоВы распечатали свое событие click на консоли.

Хотя, если вы хотите изменить свой атрибут 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>

Предложение: Используйте нижний регистр верблюда для ваших методов и свойств. Здесь ссылка на официальное руководство по стилю.

Answer 2

Работает нормально, возможно, в вашем коде есть ошибки во время выполнения.Отладка в браузере или просмотр ошибок в консоли браузера, чтобы понять, почему он не работает.

Рабочий демонстрационный код

app.component.ts

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

app.component.html

<div> Showing = {{showdeviceDropDown}}</div>

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

<div> Number of clicks:{{numOfClicks}}</div>

Answer 3

используйте ngIf вместо hidden следующим образом -

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