Javascript 如何通过离子按钮组件中的禁用条件

我有以下组成部分：

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() {
  }
}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序按钮”，
样式URL:['./button.component.scss']，
模板：`
{{title}}
`
})
导出类ButtonComponent实现OnInit{
@Input（）公共标题：字符串；
@Input（）公共颜色='primary'；
@Input（）公共条件：任意；
@Output（）public action=neweventemitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
}

但是，当我将布尔值传递出去时，它不会呈现，因为我有一个布尔值，它从false开始，根据输入变为true

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

HTML声明：

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

试试这段代码

<ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">                    
  {{title}}
</ion-button>

{{title}}

试试这段代码

<ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">                    
  {{title}}
</ion-button>

{{title}}

怎么样

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

而不是直接使用禁用的

。那应该可以完成任务。

怎么样

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

而不是直接使用禁用的

。这应该可以完成任务。

您是否尝试过：

@组件({
选择器：“应用程序按钮”，
样式URL:['./button.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush，//强制组件重新绘制输入更改
模板：`
{{title}}
`
})

如果您只是将

@Input（）

传递给模板，则可以将

changestatergy

更改为

OnPush

如果您还希望在组件内部使用

@Input（）

，则可以添加

ngOnChanges

，以在

@Input（）

更改时触发需要触发的函数

OnPush

如果您同时在页面上有许多组件，则可以大大提高应用程序的速度

您是否尝试过：

@组件({
选择器：“应用程序按钮”，
样式URL:['./button.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush，//强制组件重新绘制输入更改
模板：`
{{title}}
`
})

如果您只是将

@Input（）

传递给模板，则可以将

changestatergy

更改为

OnPush

如果您还希望在组件内部使用

@Input（）

，则可以添加

ngOnChanges

，以在

@Input（）

更改时触发需要触发的函数

OnPush

如果页面上同时有很多组件，则可以大大提高应用程序的速度

尝试以下代码

<ion-button color="{{color}}" (click)="action.emit(null)" disabled [attr.disabled]="(condition)?condition:null">                    

 {{title}}</ion-button>

{{title}}

如果发现条件值为false，则[attr.disabled]将删除disabled属性

<ion-button color="{{color}}" (click)="action.emit(null)" disabled [attr.disabled]="(condition)?condition:null">                    

 {{title}}</ion-button>

{{title}}

---

如果发现条件值为false，则[attr.disabled]将删除disabled属性

try with[disabled]=“{{condition}}”try with[disabled]=“{{condition}}”指控以下错误：解析器错误：在[{{condition}]中的第0列预期有表达式的地方得到插值（{{}]指控以下错误：分析器错误：获取插值（{{}），其中表达式应位于[{{condition}]中的第0列