时间戳

首页 > 解决方案 > Angular 7（点击）不适用于 [hidden] 属性

angular - Angular 7（点击）不适用于 [hidden] 属性

问题描述

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>

标签： angularangular7

解决方案

它工作正常，您的代码中的其他地方可能存在运行时错误。在浏览器中调试或在浏览器控制台中查看错误以查看其无法正常工作的原因。

工作演示代码

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>

推荐阅读