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

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的内容禁用。在这种情况下，必须禁用按钮“b”并启用“a”。我正在尝试使用 [disabled]，但我不确定如何访问对象数组中的正确值。

编辑：我找到了一些访问该值的方法，但所有方法都是异步的或要求对数组进行完整循环以找到正确的元素，在这两种情况下，我都看到了问题：如何处理前端的异步代码(?) 以及是否可以避免每个按钮在数组上出现完整循环。

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>