Question

我正在尝试启用/禁用按钮

App.component.html：根组件在更改时触发并设置初始值。

＆＃13;

<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
<div style="text-align:center">
  <h1>
  {{ title }}!
  </h1>
  <favorite [isFavorite]="post.isFavorite" (change)="onFavoriteChange($event)" ></favorite>
</div>
<h1></h1>
<courses></courses>
</div>

＆＃13;

app.component.ts：由根组件组成，包括更改功能和帖子对象

＆＃13;

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello User';
  post={
  	title:'Pti',
  	isFavorite:true

  }
  onFavoriteChanged(isFav)
  {
  	console.log("On Favorite Changed",isFav);
  }
}

＆＃13;

收藏组件

favorite.component.ts

＆＃13;

 <button  class="waves-effect waves-light btn" [class.enabled]="isSelected"
 [class.disabled]= "!isSelected" 
 (click)="onClick" >Click to {{isSelected}}</button>

＆＃13;

favorite.component.ts：包含onclick以切换类并发出结果

＆＃13;

import { Component, OnInit, Input, Output ,EventEmitter } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
	@Input('isFavorite') isSelected: boolean;
  	@Output() change=new EventEmitter();
   
  onClick()
  {
  	console.log("CLicked");
  	this.isSelected=!this.isSelected;
  	this.change.emit(isSelected);
  }

  ngOnInit() {
  }

}

＆＃13;

按钮没有切换。没有类更改和发射器也不会发出任何结果。

Answer 1

更改 (click)="onClick" 至 (click)="onClick()"

在favorite.component.ts中

这是正确的答案。

感谢@Daniel指出它。

Answer 2

从描述中不清楚是否完全触发了onClick函数，但是对于在Angular设置中调整类，它直接像[class.whatever]="expression"一样对我来说也不起作用，而是我成功了这个表格：

<button [ngClass]="{ 'enabled': isSelected, 'disabled': !isSelected }">

使用Angular 4切换按钮的类

2 个答案: