Tìm kiếm trang web

javascript - Làm thế nào để trả về một id duy nhất từ đối tượng trong MatTable?

Tôi có một ứng dụng Angular 8 và tôi đang sử dụng Angular Material với MatTableDatasource.

Và tôi muốn lấy id từ đối tượng được chọn.

Vậy là tôi có danh sách này:

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

và vì vậy nếu bạn nhấp vào một hàng mà tôi muốn trả về id, ví dụ: e38e3a37-eda5-4010-d656-08d81c0f3353

Vậy tôi thử theo cách này:

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

và script 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;
}

Nhưng nếu tôi thử điều đó, tôi nhận được lỗi này:

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)

Vậy tôi phải thay đổi gì?

Cảm ơn

Đây là hàm khởi tạo:

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

vậy nếu tôi làm điều này:

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

nó trả về tất cả các định nghĩa:

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

Câu trả lời #1

Thấy không, vấn đề là bạn đã làm

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

Nhưng bạn đã gửi điều này tới hàm

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

Có nghĩa là, bạn đã gửi chuỗi của id đến hàm. Typescript không la hét với bạn về điều đó, mặc dù bạn đã nói với nó rằng kiểu là EcheqDefinitionApi.

Bây giờ, khi bạn nhấp vào hàng, chuỗi id sẽ được gửi đến hàm. Khi bạn cố gắng ghi log id của chuỗi đó, bạn nhận được lỗi - bởi vì nó không chứa id!

Cách bạn có thể giải quyết điều đó:

  • Gửi hàng đến hàm - như trong getRowId(row: EcheqDefinitionApi) và trong HTML: (click)="getRowId(row)"
  • Sử dụng chuỗi id accepted- như trong getRowId(rowId: string) { console.log(rowId); } và trong HTML: (click)="getRowId(row.id)"

Chúc may mắn!