无法使用角形材质创建带有复选框和数据的嵌套可扩展行

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.在可展开的行中，再次重复父数据，而不显示子数据（位于嵌套下方）。

2. 尽管已为所有行实施了复选框选择，但仅对父项有效，而对子项无效，因此需要选择表中的所有行并获取其ID

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

Answer 1

Issue1 你必须使用嵌套在孩子中

{{nested[key]}}

代替

{{element[key]}}

问题2 它工作得很好。看看他的 stackblitz。它标志着孩子和父母。

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 据我了解，这就是你想要的。现在只在选择中添加 id。立即在父级单击时选中子级复选框。

这是结果中的图像：

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

  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>

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