действие mat-table не срабатывает при нажатии строки

Я новичок в angular и пытаюсь использовать некоторые функции матовых таблиц. Хотя у меня большая часть того, что мне нужно, сделано, я не могу запустить какое-либо действие, когда я щелкаю строку. Мой тест для этой функциональности - удалить строку, по которой щелкнули. Что я действительно хочу, так это отобразить другой компонент, но я еще не начал с этого, поэтому удаление дает четкий сигнал о том, что щелчок срабатывает для правой строки.

Таблица выглядит следующим образом:

<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Name</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.title }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="partNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Number</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.partNumber }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Description</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.description }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="leadTime">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Lead Time</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.leadTime }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Weight</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.weight }}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" click="displayDetail(row._id)"></mat-row>

</mat-table>

Что запускает следующее событие в моем файле компонента:

partList: Array<Part> = new Array<Part>();
dataSource = new MatTableDataSource(this.partList);

displayDetail(i) {
   this.partList.splice(i, 1);
}

Я возился со многими частями и сделал почти все, что мог придумать, но я чувствую, что моя неопытность с angular заставляет меня упускать из виду что-то простое.


person Marshall Tigerus    schedule 17.01.2018    source источник


Ответы (1)


Отвечаю на это, если у кого-то еще есть аналогичная проблема.

У меня было несколько проблем с кодом, но теперь это рабочий блок кода:

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" 
     (click)="displayDetail(row.partNumber)"></mat-row>

Это определяет несколько проблем. щелчок должен был быть заключен в круглые скобки (я не уверен, что это было проблемой, но это было частью шагов, которые заставили его работать).

Настоящая проблема - это объект строки. В примере, который я брал, было поле _id в наборе столбцов мата. Этот объект строки не является какой-то специфичной для мата вещью, а просто объектом, который представляет данные из вашего источника данных (ошибка в понимании, которую я имел, заключалась в том, что это было что-то специфичное для матовой таблицы). Таким образом, у него есть только те строки/данные, которые вы ему даете из источника данных. Если бы в моих данных было поле id, я мог бы вызвать его по id. Поскольку это не так, я не получал достоверной информации.

Я изменил его, чтобы возвращать уникальный идентификатор в данных, которые мне нужно передать следующему компоненту. И все было хорошо.

person Marshall Tigerus    schedule 18.01.2018