javascript - 无法使用 Angular Material 创建带有复选框和数据的嵌套可扩展行

Question

我在这里尝试从平面 json 创建一个嵌套的可扩展表

我做了什么:

下面是扁平的 json :

           public unsortedData = [
  {
    "url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "part": "wing",
    "main": "boeing",
    "part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
  },
  {
    "url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "part": "wing",
    "main": "boeing",
    "part_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "information.data_check": "parent_info"
  },
  {
    "url": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "part": "wing",
    "main": "boeing",
    "part_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "information.data_check": "single_info"
  }
];

并将其转换为嵌套的 json，如下所示:

[
  {
    "nested": [
      {
        "url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "part": "wing",
        "main": "boeing",
        "part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
      }
    ],
    "url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "part": "wing",
    "main": "boeing",
    "part_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "information.data_check": "parent_info"
  },
  {
    "url": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "part": "wing",
    "main": "boeing",
    "part_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "information.data_check": "single_info"
  }
]

结果如下

问题: 1. 在可扩展行中，父数据再次重复，而不是显示子数据(在嵌套下)。

1. 虽然为所有行实现了复选框选择，但它只对父级有效，对子级无效，因此需要选择表中的所有行并获取它们的 ID

我不确定是什么导致了下面的问题是我的 stackblitz:--> https://stackblitz.com/edit/angular-wsdvgd

Answer 1

问题 1你必须使用嵌套在 child 身上

{{nested[key]}}

代替

{{element[key]}}

第 2 期它工作得很好。看看他的 stackblitz。它标志着 child 和 parent 。

https://stackblitz.com/edit/angular-qmxvja

编辑

因为我看到了第二个答案。我意识到您可能需要在子行中包含复选框。

为此添加:

            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(nested) : null" [checked]="selection.isSelected(nested)"
            [aria-label]="checkboxLabel(nested)">
            </mat-checkbox>

在嵌套的 div 中。

结果是这样的。 https://stackblitz.com/edit/angular-rb7adw

编辑 2:

https://stackblitz.com/edit/angular-8fv2vk据我了解，这就是您想要的。现在只有 ids 被添加到选择中。现在在父单击时选中子复选框。

这是来自结果的图像:

只有一个问题。添加这么多复选框会增加检查取消检查逻辑的复杂性。

  selectSingle(event, row) {
    row.nested.forEach(nestedRow => {
      if (!this.selection.isSelected(row._id)) {
        if (!this.selection.isSelected(row._id)) {
          this.selection.select(nestedRow._id);
        } else {
          this.selection.select(nestedRow._id);
        }
      } else {
        if (!this.selection.isSelected(row._id)) {
          this.selection.select(nestedRow._id);
        } else {

        }
      }
    })
    this.selection.isSelected(row._id)
    return event ? this.selection.toggle(row._id) : null
  }

这是决定父点击逻辑的函数。您可以按照自己喜欢的方式调整它。我不确定你喜欢什么逻辑。我把你提出的问题中听起来最好的一个放在了问题中。

所有展开的显示都已标记。

摆脱嬉皮士。

更改代码自:

    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
         [aria-label]="checkboxLabel()">
        </mat-checkbox>
    </th>

到

    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
         [aria-label]="checkboxLabel()">
        </mat-checkbox>
    </th>

但我不确定它是否值得。这可能会或可能不会破坏其他东西。