How to return single id from object in MatTable?

Question

I have a angular 8 application and I am using angular material with MatTableDatasource.

And I want to get the id from the selected object.

So I have this list:

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",…}

and so if you click on a row that I want to reuturn the id, so for example: e38e3a37-eda5-4010-d656-08d81c0f3353

So I try it like this:

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

and ts script:

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

But if I try that. I get this error:

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)

So what I have to change?

Thank you

This is the constructor:

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));
  }

so if I do this:

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

it retuns all the 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

did you try to send row to the function and see what is the object? — BatshevaRich, Jun 29 '20 at 14:27
Does this answer help you in resolving your issue? https://stackoverflow.com/a/50292634/7743705. Ideally, you will have to extrapolate a couple of things from this to achieve your required outcome. — Dhruv Shah, Jun 29 '20 at 14:29
@NiceTobeBottleInfinity how did you initialize the datasource? please show code for that. — BatshevaRich, Jun 29 '20 at 14:38

score 1 · Accepted Answer · answered Jun 29 '20 at 18:08

See, the problem is that you did

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

But you sent to the function this

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

Meaning, you sent the string of the id to the function. Typescript doesn't yell at you about that, event though you told it the type is EcheqDefinitionApi.

Now, when you click on the row, the string id is sent to the function. When you try to log the id of that string you get an error- because it does not contain an id!

How you can solve that:

Send the row to the function- as in getRowId(row: EcheqDefinitionApi) and in the HTML: (click)="getRowId(row)"
Use the string id accepted- as in getRowId(rowId: string) { console.log(rowId); } and in the HTML: (click)="getRowId(row.id)"

Good luck!

How to return single id from object in MatTable?

1 Answers1