MatTable-角材質：找不到ID為的列

Question

我正在嘗試以編程方式顯示表格：

<div [formArrayName]="doc.typeSelector">
                  {{ doc.typeSelector }}
</div>
<div *ngIf="documents[doc.typeSelector]">
     <mat-table
      [dataSource]="documents[doc.typeSelector]"
      *ngFor="let col of docColumns">
      <ng-container [matColumnDef]="col">
        <th mat-header-cell *matHeaderCellDef> {{ col | uppercase }} </th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
      </ng-container>
    <tr mat-header-row *matHeaderRowDef="docColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: docColumns;"></tr>
  </mat-table>
</div>

哪里：

documents: object = {};
docColumns: string[] = ["name", "uploadDate", "uri", "comments"];
docs = [];
docForm: FormGroup;
docTypes: object = {
    fs: 'Financial Statements',
    id: 'Identity Document',
    ad: 'Bank Account Details',
    cd: 'Constitutional Document',
    pd: 'Power Document',
  };

以及使用ngOnInit()填充documents / docs / docFrom變量的位置：

[...] this.docForm = this.fb.group({});
    Object.keys(this.docTypes).map(
      type => {
        this.docForm.addControl(type, this.fb.array([]));
        this.docs.push({
         typeName: this.docTypes[type],
         typeSelector: type
        });
    }
  );

然后，如果有客戶，則訂閱將從數據庫中獲取數據...，一旦我們獲得了信息，它就會被匯總到變量中：

// Info for the docForm:
              const cusDocs = this.customer.docRefs;
              Object.keys(cusDocs).map(docType => {
                const currDocs = [];
                cusDocs[docType].forEach(doc => {
                  currDocs.push(this.customerService.createNewDoc(doc));
                });
                const matchForm = this.docForm.get(docType) as FormArray;
                currDocs.forEach(form => {
                  matchForm.push(form);
                });
              });
              Object.keys(this.docForm.value).map(docType => {
                const currForm = this.docForm.get(docType) as FormArray;
                if (currForm.value.length > 0) {
                  Object.keys(currForm.value).map(doc => {
                    const currentDoc = currForm.at(+doc).value;
                    const newDocRow = {
                      name: currentDoc.name,
                      uploadDate: currentDoc.uploadDate,
                      uri: currentDoc.uri,
                      comments: currentDoc.comment
                    };
                    if (!this.documents[docType]) {
                      this.documents[docType] = [];
                    }
                    this.documents[docType].push(newDocRow);
                    console.log(this.documents[docType]);
                  });
                }
              });
              console.log(this.documents);
              console.log(this.docColumns);

• docs array使用docs array來顯示擴展面板
• docTypes object用於構建先前的變量，以匹配服務器的響應。 可能沒什么用，但是在我構建它時，我想確保服務器信息與DOM相匹配...
• docForm是一個FormGroup包含5種可以上載的不同文檔類型。
• docColumns是預先設置的docColumns 。
• 最后但並非最不重要的一點是， documents是用於定義行的object array 。

這是console.logs結果：

我已經看到過類似的問題，但是我不確定我的錯誤是否適合這些情況...預先感謝！

編輯----------------------編輯：Olipej的回答似乎無法解決我的問題，或者我無法理解錯誤的出處。

我做了一個stackblitz來復制我的數據結構和我得到的錯誤： https ://stackblitz.com/edit/mat-table-error-example

Stackblitz屏幕截圖：

Answer 1

您的ngFor循環設置在mat-table元素上。 您想使用ng-container元素上的循環來用數據填充表。 現在，您正在使用錯誤的數據生成多個席子表。

更改此設置，您將看到魔術發生了:)

Answer 2

您確定要傳遞給matTable的對象都具有與列ID匹配的屬性嗎？

在模板的開頭，您檢查“文檔”中的元素，但從未檢查其屬性。

<div *ngIf="documents[doc.typeSelector]">

當然，您不必檢查屬性是否存在，但是因為出現錯誤：“找不到ID為“ uploadDate”的列”，我認為您傳遞的對象實際上還沒有該屬性。

如果這樣做沒有幫助，您能否提供一個stackblitz示例？

Answer 3

我正在創建一個新的答案，因為我將需要涵蓋的范圍超過評論所允許的范圍。

首先，您鏈接了一個與問題代碼不匹配的stackblitz示例。 既不使用mat-table，也不顯示您要顯示的數據。 問題代碼和示例代碼之間的結構都不同。

我認為您首先需要問自己要完成的任務。 然后，您需要問自己自己，要解決什么問題。

現在，如果您仍然認為需要使用mat-table，那么我將幫助您將其與動態列配合使用。

首先要使用mat-table，需要顯示一個對象數組和一個列ID定義。

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

dataSource使用ELEMENT_DATA ，它是對象的數組。

displayedColumns是ID的字符串數組，是每一列的定義。 請注意，此數組中的每個字符串都必須匹配PeriodicElement任何屬性/變量名稱， 區分大小寫 。

這就是您使用mat-table的方式。

<table mat-table [dataSource]="dataSource">
  <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
    <th mat-header-cell *matHeaderCellDef> {{col}} </th>
    <td mat-cell *matCellDef="let element"> {{element[col]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

mat-table需要數據源才能顯示任何內容。 請注意，我將* ngFor放在哪里？ 我把它放在ng容器上，因為一個ng容器是一列。 我遍歷了displayedColumns 。 id數組，並使用它們獲取element屬性。

這是一個有效的例子

盡管如果您使用的數據對象中的屬性名稱永遠不變。 您甚至不需要動態循環這些列，我真的建議您只閱讀角度墊表的標准文檔並測試示例代碼。

我希望這可以幫助您解決問題。