javascript - 根据数组内对象的属性值禁用 Angular 按钮？

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]，但我不确定如何访问对象数组中的正确值。

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

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>