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

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 你必须使用嵌套在孩子中

{{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>

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

Answer 2

请为您的问题找到解决方案

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

1.您必须在 ts 文件中创建一个新方法来检索该值。您正在检索密钥，而不是值

app.component.ts

    getKeysTop(object): string[] {
       console.log(Object.keys(object));
       return Object.values(object);
    }

app.component.html

<div class="example-element-description__cell" *ngFor="let value of getKeysTop(nested)" style="padding-left: -5px;">{{value}}</div>

2.您必须重复嵌套行的复选框代码块

app.component.html

                 <div class="example-element-description">
                  <div class="example-element-description__header">
                    <div class="example-element-description__cell" *ngFor="let key of getKeys(element['nested'][0])">{{key}}</div>
                  </div>
                  <div *ngFor="let nested of element['nested']; let idx = index"    
                      class="example-element-description__content"
                      (click)=onItemSelected(idx)>
                     
                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)">
                    </mat-checkbox>
                    
                <div class="example-element-description__cell" *ngFor="let value of getKeysTop(nested)" style="padding-left: -5px;">{{value}}</div>
                  </div>
                </div>