Question

我正在尝试创建一个表，当您单击按钮时，该表需要在其正下方显示行。

我看过this帖子，但找不到答案。

当我像下面这样操作时，它可以工作，但是问题是，由于所有其他隐藏行都共享相同的collapse variable，因此它会显示所有其他隐藏行。

这是可行的示例，但并非100％正确：

<table>
<thead>
  <th>Path out of this queue</th>
  <th *ngFor="let role of roles">{{role.RoleName}}</th>>
</thead>
<tbody>
  <ng-container *ngFor="let queue of workQueues; let i = index">
    <tr>
      <td><button (click)="collapse=!collapse">{{queue.WorkQueueName}}</button></td>
      <td *ngFor="let role of roles">
        <input type="checkbox" />
      </td>
    </tr>
    <tr *ngIf="collapse">
      Yay...
    </tr>
  </ng-container>
</tbody>

我认为我可以通过将collapse variable（即i）附加到index来使其唯一，但是随后出现以下错误：

解析器错误：在需要表达式的地方进行插值（{{}}）

这是我的尝试：

<table>
<thead>
  <th>Path out of this queue</th>
  <th *ngFor="let role of roles">{{role.RoleName}}</th>>
</thead>
<tbody>
  <ng-container *ngFor="let queue of workQueues; let i = index">
    <tr>
      <td><button (click)="{{collapse+i}}={{!collapse+i}}">{{queue.WorkQueueName}}</button></td>
      <td *ngFor="let role of roles">
        <input type="checkbox" />
      </td>
    </tr>
    <tr *ngIf="{{collapse+i}}">
      Yay...
    </tr>
  </ng-container>
</tbody>

具体来说，在我的(click)事件中，如何制作可以使用的唯一变量？

Answer 1

(click)="{{collapse+i}}={{!collapse+i}}"

应该是

(click)="this[collapse+i] = !this[collapse+i]"

这允许您使用索引器来获取组件上的字段。是否实际有效取决于您如何在组件上定义collapse字段。

我个人更喜欢用附加字段扩展workQueues数组中包含的类型。

(click)="queue.collapsed = !queue.collapsed"

...

<tr *ngIf="queue.collapsed">

另一种选择是在*ngFor中定义一个新字段。

<ng-container *ngFor="let queue of workQueues; let i = index; let isCollapsed = true">
<tr>
  <td><button (click)="isCollapsed = !isCollapsed">{{queue.WorkQueueName}}</button></td>
  <td *ngFor="let role of roles">
    <input type="checkbox" />
  </td>
</tr>
<tr *ngIf="!isCollapsed">
  Yay...
</tr>
</ng-container>

stackblitz

在* ngFor中创建唯一的变量名

1 个答案: