無法使用角形材質創建帶有復選框和數據的嵌套可擴展行

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

問題1，您必須使用嵌套在子級中

{{nested[key]}}

代替

{{element[key]}}

Issure 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
  }

這是決定父級點擊邏輯的函數。 您可以用自己喜歡的方式來調節它。 我不確定您喜歡哪種邏輯。 我提出了一種聽起來最與您提出的問題最相符的答案。

所有展開的節目均已標​​記。

擺脫hiphen。

更改代碼：

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