Question

我有一个对象数组：

keyDisabledArray=[
  {'a':false},
  {'b':true}
]

和一些按钮

<button class="key" (click)="keyPressed('a')" id="a">A</button>
<button class="key" (click)="keyPressed('b')" id="b">B</button>

必须根据keyDisabledArray的内容禁用。在这种情况下，按钮＆＃39; b＆＃39;必须被禁用并且＆＃39; a＆＃39;启用。我尝试使用[已禁用]，但我不确定如何访问对象数组中的正确值。

编辑：我发现了一些访问该值的方法，但是所有方法都是异步的，或者要求在数组上使用完整的循环来查找正确的元素，在这两种情况下，我都会看到问题：前端如何处理异步代码的角度（？）以及是否可以为每个按钮避免数组上的完整循环。

Answer 1

您可以编写一个管道来增加正确的值。

修改：了解如何创建接受多个参数的管道How do I call an Angular 2 pipe with multiple arguments?

编辑＃2 ：这是一段代码示例（未经过测试）

import {Pipe, PipeTransform} from '@angular/core';


@Pipe({
  name: 'isDisabled'
})
export class IsDisabledPipe implements PipeTransform
{

  transform(array: any, key: string): any
  {

    let val = array.find(v => v.hasOwnProperty(key));
    return val? val[key] : false;

  }

}

然后你可以像

一样使用它

 <button class="key" [disabled]="keyDisabledArray | isDisabled:'a'" (click)="keyPressed('a')" id="a">A</button>

否则，为什么不将数组转换为json对象？

keyDisabledArray=
{
  'a':false,
  'b':true
};

然后，访问该值将更容易

<button class="key" [disabled]="keyDisabledArray['a']" (click)="keyPressed('a')" id="a">A</button>

根据数组内对象的属性值禁用角度按钮？

1 个答案: