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

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

我不确定是什么引起以下问题是我的堆叠闪电：-> https://stackblitz.com/edit/angular-wsdvgd

Answer 1

问题1 您必须使用嵌套在儿童中的

{{nested[key]}}

代替

{{element[key]}}

问题2 它工作正常。看他的闪电战。它标志着孩子和父母。

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>

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

2 个答案: