Угловое 6 - событие Click не срабатывает - angular


1

Я пытаюсь добавить кнопку на угловой стол.

Он показывает кнопку, но при нажатии на нее она не запускает событие.

Это моя таблица:

<table mat-table [dataSource]="GetGridData()">
  <!-- Rest removed for brevity.. -->

  <ng-container matColumnDef="Products">
    <th mat-header-cell *matHeaderCellDef> Products </th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button (click)="OnGetAllProducts(element.CategoryId)">See all products</button>
    </td>
  </ng-container>

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

И это то, что я получил от своих ts:

export class DashboardComponent {
    // Rest of code removed for brevity.         

    // Row events.
    //--------------
    OnGetAllProducts(categoryId: number) {
        alert("Listed");
    }
}

И это моя модель:

export class Category {
    public CategoryId: number;
    public CategoryName: string;
}
Источник
  •  48
  •  2
  • 4 мар 2020 2020-03-04 04:45:32

2 ответа

0

TL;DR; проверить правильность стилей

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

@BasavarajBhusani и другие задавали действительно хороший вопрос, если button is really visible from UI.

Правда состоит в том, что, несмотря на то, что я физически виден, моя кнопка выскользнула из границ родительского элемента. После фиксации стилей, создав родительский элемент для динамического изменения его размера, он начал работать хорошо.

Странно, но одна и та же компоновка хорошо работала в AngularJS (1.X), но остановилась после портирования на Angular 6.

  • 4 мар 2020 2020-03-04 04:45:32
0

Это dataSource. Функция GetGridData() работает постоянно, потому что вы поместили ее в шаблон, который бесконечно перерисовывает таблицу, поэтому эта плохая практика. Вместо этого сохраните результат в переменной и то, что вы должны передать как ваш источник данных.

  • 4 мар 2020 2020-03-04 04:45:32