如何从 MatTable 中的对象返回单个 id？答案

【问题标题】：How to return single id from object in MatTable?如何从 MatTable 中的对象返回单个 id？
【发布时间】：2020-06-29 14:19:40
【问题描述】：

我有一个 angular 8 应用程序，我正在使用带有 MatTableDatasource 的 angular 材料。

我想从所选对象中获取 id。

所以我有这个清单：

0: {id: "e38e3a37-eda5-4010-d656-08d81c0f3353", family: "b2d72183-3cfc-4f49-bf71-0ed969f820f0",…}
1: {id: "126310fa-645e-40fb-f5a6-08d81b45f7e4", family: "120943ce-ed49-4aa1-a1d7-ab8e6f4bf18e",…}
2: {id: "a8fb7fe2-6301-4a16-4c67-08d81c15a41c", family: "48b152b8-20c7-4f10-b613-6314251564b6",…}
3: {id: "df386049-6da0-45b0-d659-08d81c0f3353", family: "fafb37c3-ee68-4cd5-8ecc-d6b553700c14",…}
4: {id: "e70940c1-2e29-4b4c-d657-08d81c0f3353", family: "90ecca9e-b70e-4ac0-b41d-a82a289e87a1",…}
5: {id: "bff0475b-0c34-4709-e9c1-08d7b5e43648", family: "0df5ab39-eab4-4ce8-b511-419028031012",…}

如果你点击我想要返回 id 的行，例如：e38e3a37-eda5-4010-d656-08d81c0f3353

所以我这样尝试：

   <ng-container matColumnDef="dupliceren">
        <th mat-header-cell *matHeaderCellDef i18n>duplicate</th>
        <td mat-cell *matCellDef="let row">

          <a
            mat-button
            mat-icon-button

            (click)="getRowId(row.id)"
            ><mat-icon>filter_none</mat-icon></a
          >
        </td>
      </ng-container>

和ts脚本：

getRowId(rowId: EcheqDefinitionApi) {
    console.log(rowId.id);
  }

export interface EcheqDefinitionApi { 
    /**
     * Primary key of this version of an eCheq. Set by server.
     */
    id?: string;
    /**
     * All echeqs with the same family guid are versions of the same eCheq. Set by server.
     */
    family?: string;
    /**
     * Title of this version of an eCheq, visible to users.
     */
    title: string;
}

但如果我尝试这样做。我收到此错误：

ListComponent.html:111 ERROR TypeError: Cannot read property 'id' of undefined
    at ListComponent.push../src/app/echeq-definition/list/list.component.ts.ListComponent.getRowId (list.component.ts:69)
    at Object.eval [as handleEvent] (ListComponent.html:115)
    at handleEvent (core.js:19628)
    at callWithDebugContext (core.js:20722)
    at Object.debugHandleEvent [as handleEvent] (core.js:20425)
    at dispatchEvent (core.js:17077)
    at core.js:17524
    at HTMLAnchorElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14134)

那么我必须改变什么？

谢谢

这是构造函数：

constructor(private i18n: I18n, private dialog: MatDialog, route: ActivatedRoute) {
    const allDefinitions: EcheqDefinitionApi[] = route.snapshot.data['definitions'];
    this.isArchive = route.snapshot.data['isArchive'] || false;

    // Essentialy a group by family
    const latestFamilyDefinitions: {[family: string]: ListItem} = allDefinitions.reduce((accumulated: {[family: string]: ListItem}, i) => {
      const listItem = accumulated[i.family];
      if (!listItem) {
        accumulated[i.family] = new ListItem(i);
      } else {
        listItem.addToFamily(i);
      }
      return accumulated;
    }, {});
    this.datasource = new MatTableDataSource(Object.values(latestFamilyDefinitions));
  }

如果我这样做：

  getRowId(rowId: ListItem) {
   const hallo =  this.route.snapshot.data['definitions'];
  }

它返回所有定义：

0: {id: "e38e3a37-eda5-4010-d656-08d81c0f3353", family: "b2d72183-3cfc-4f49-bf71-0ed969f820f0", title: "HelloThere", createdBy: "d9824535-c6b0-40cf-84e2-d9e37b02a5db", createdByName: "", …}
1: {id: "126310fa-645e-40fb-f5a6-08d81b45f7e4", family: "120943ce-ed49-4aa1-a1d7-ab8e6f4bf18e", title: "HelloThere", createdBy: "d9824535-c6b0-40cf-84e2-d9e37b02a5db", createdByName: "", …}
2: {id: "a8fb7fe2-6301-4a16-4c67-08d81c15a41c", family: "48b152b8-20c7-4f10-b613-6314251564b6", title: "hoi", createdBy: "d9824535-c6b0-40cf-84e2-d9e37b02a5db", createdByName: "", …}
3: {id: "df386049-6da0-45b0-d659-08d81c0f3353", family: "fafb37c3-ee68-4cd5-8ecc-d6b553700c14", titl

【问题讨论】：

您是否尝试将行发送到函数并查看对象是什么？
这个答案能帮助您解决问题吗？ stackoverflow.com/a/50292634/7743705。理想情况下，您必须从中推断出一些事情才能实现所需的结果。
你到底是什么意思？
如果我这样做：console.log(rowId);我也回来了 undefined
@NiceTobeBottleInfinity 你是如何初始化数据源的？请显示代码。

标签： javascript angular typescript angular-material

【解决方案1】：

看，问题是你做了

getRowId(rowId: EcheqDefinitionApi) {
console.log(rowId.id);
}

但是你发送给这个函数

(click)="getRowId(row.id)"

意思是，您将 id 的字符串发送给函数。 Typescript 不会对你大喊大叫，尽管你告诉它类型是 EcheqDefinitionApi。

现在，当您单击行时，字符串 id 将发送到函数。当您尝试记录该字符串的 id 时，您会收到错误 - 因为它不包含 id！

你如何解决这个问题：

将行发送到函数 - 如getRowId(row: EcheqDefinitionApi) 和 HTML：(click)="getRowId(row)"
使用字符串 id 接受 - 如getRowId(rowId: string) { console.log(rowId); } 和 HTML：(click)="getRowId(row.id)"

祝你好运！

【讨论】：