Question

我有以下内容：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  styleUrls: ['./button.component.scss'],
  template: `
              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">
                {{title}}
              </ion-button>
            `
})

export class ButtonComponent implements OnInit {

  @Input() public title: string;
  @Input() public color = 'primary';
  @Input() public condition: any;

  @Output() public action = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }
}

但是当我从中传递布尔值时，它不会呈现，因为我有一个布尔值，该布尔值从输入开始为false并变为true。

编辑：问题是，当validDocument变为true时，该按钮不会再次呈现并保持禁用状态。

HTML声明：

<app-button title="Buscar" (action)="go()" condition="!validDocument"></app-button>

Answer 1

怎么样

[attr.disabled]="condition ? '' : null"

而不是直接使用disabled。那应该做的。

Answer 2

尝试此代码

create trigger trg_tab3_insert on tab3 for insert
as
insert into tab4(col_1, id_tab3)
select col_1, id
from inserted

Answer 3

您是否尝试过：

@Component({
  selector: 'app-button',
  styleUrls: ['./button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush, // force a component re-draw on input change
  template: `
              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">
                {{title}}
              </ion-button>
            `
})

如果您只是将@Input()传递给模板，则可以将changeStratergy更改为OnPush。

如果您还想在组件内部使用@Input()，则可以添加ngOnChanges来触发在更改@Input()时需要触发的功能。

https://angular.io/api/core/ChangeDetectionStrategy

如果您同时在页面上有很多组件，则

OnPush可以大大提高您的应用程序速度

Answer 4

尝试以下代码

False

如果发现 condition 值为假，则

[attr.disabled]将删除 disabled 属性

离子按钮组件中如何通过禁用状态

4 个答案: