javascript - 如何使用 Angular 中的 bool 值 true 或 false 禁用 ngClass 中的 div

Question

displayData = [
  {
    status: 'CLOSED', ack: false
  },
  {
    status: 'ESCALATED', ack: false
  },
  {
    status: 'ACK', ack: false
  },
  {
    status: 'ACK', ack: true
  },
  {
    status: 'NEW', ack: true
  }
]

我想要做的是，当状态为“NEW”并且他的确认为“true”时，不会禁用该 div。如果状态为“CLOSED”、“ACK”、“ESCALATED”，即使它们的 ack 为“false”，也不会禁用已禁用的 div。即使状态为“ACK”且其 ack 为“true”，也不会禁用

<div class="action-default"
[ngClass] = "!['CLOSED', 'ESCALATED', 'ACK', 'NEW'].includes(dataDisplayed?.status) ? 'disabled' : ''" >
  <i nz - icon nzType = "close-circle" nzTheme = "outline" > </i>
Cancel
  < /div>

Answer 1

dataDisplayed 是一个对象数组，因此您无法像 那样访问属性status dataDisplayed?.status。在访问属性之前，您需要获取每个单独的对象。

根据你的解释，你需要检查status和ask，但这里你只检查status。

您的代码应该类似于

<div 
  class="action-default"
  *ngFor="let data of dataDisplayed"
  [ngClass] = "((['CLOSED', 'ESCALATED', 'ACK'].includes(data.status) && data.ack) || (data.status === 'NEW' && !data.ack)) ? 'disabled' : ''" >
  <i nz - icon nzType = "close-circle" nzTheme = "outline" ></i>
  Cancel
</div>