Блог

Я пытаюсь создать шаблон в своем приложении Angular 11, но он не распознает данные внутри него.

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

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

Вот как я это делаю:

 <kendo-grid [data]="data" ... >
  <kendo-grid-column ... >
    <ng-template kendoGridCellTemplate let-dataItem>

      <!-- MY TEMPLATE -->
      <ng-template #customMenuItemsTemplate let-dataItem="dataItem">
        <button mat-menu-item *ngIf="dataItem.hpi?.id" ... >
          <mat-icon>...</mat-icon>
        </button>
      </ng-template>
    
      <!-- MY BUTTON amp; MENU COMPONENT -->
      <app-command-menu
        [contentTemplate]="customMenuItemsTemplate"
        [hpiId]="dataItem.hpi.id"
        ...
      ></app-command-menu>
      
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
 

Как вы можете видеть, я определяю свой шаблон внутри сетки (точнее, внутри таблички kendoGridCellTemplate). Я определяю его непосредственно перед компонентом командного меню приложения. Я даю шаблону ссылочный тег #customMenuItemsTemplate и использую эту ссылку для привязки шаблона к [ContentTemplate] в компоненте командного меню. Я добавляю шаблон внутри сетки, чтобы он знал, что такое элемент данных. Тем не менее, я продолжаю получать сообщение об ошибке в консоли, говорящее::

Cannot read properties of undefined (reading 'hpi')

До того, как я добавил шаблон, у приложения не было проблем с DataItem. Как вы можете видеть, я привязываюсь dataItem.hpi.id к [hpiId] компоненту командного меню. Это было там до того, как я добавил шаблон, и он работал нормально. Почему элемент данных должен быть определен для компонента, но не для шаблона, даже если они оба находятся в одном и том же месте в сетке? Связано ли это с тем, что значения в шаблоне считываются только изнутри компонента (т. Е. После их ввода), а не со страницы с сеткой?

Пожалуйста, дайте мне знать, если вам понадобятся дополнительные примеры кода или дополнительные пояснения.

Решение этой проблемы было очень простым. Мне пришлось удалить let-dataItem="dataItem" его из своего шаблона. Так что это:

 <ng-template #customMenuItemsTemplate let-dataItem="dataItem">
...
</ng-template>
 

превратился в это:

 <ng-template #customMenuItemsTemplate>
...
</ng-template>
 

Я не совсем понимаю, почему это сработало. Я бы подумал, что установка элемента данных с let-dataItem="dataItem" помощью будет в лучшем случае безвредной, но, по-видимому, это приводит к тому, что Angular НЕ знает, что такое элемент данных.