angular12 - 模板引用属性缺失

Question

我正在将我的 angular 11 项目转换为 angular 12 并且我面临一些问题。在一个 ngx-nestable 组件中，它在 angular 11 中工作正常，但是当我将它更新到版本 12 时，它向我显示了一些错误，请检查屏幕截图。

这是我的 .ts 文件代码：

    import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
    import { NestableSettings } from './lib/nestable.models';

    @Component({
      selector: 'app-nestable',
      templateUrl: './nestable.component.html',
      styleUrls: ['./nestable.component.css']
    })
    export class NestableComponent implements OnInit {
        
        

      public idCount = 13;
      public options = {
        fixedDepth: false
      } as NestableSettings;
      public list = [
        { 'id': 1 },
        {
          'expanded': true,
          'id': 2, 'children': [
            { 'id': 3 },
            { 'id': 4 },
            {
              'expanded': false,
              'id': 5, 'children': [
                { 'id': 6 },
                { 'id': 7 },
                { 'id': 8 }
              ]
            },
            { 'id': 9 },
            { 'id': 10 }
          ]
        },
        { 'id': 11 },
        {
          'id': 12,
          'children': [
            { 'id': 13 }
          ]
        },
        { 'id': 14 },
        { 'id': 15 }
      ];

      constructor(
        private el: ElementRef,
        private renderer: Renderer2
      ) {
        this.renderer.listen(this.el.nativeElement, 'listUpdated', e => {
          this.list = e.detail.list;
        });
      }

      public pushItem() {
        this.list.push({ id: ++this.idCount });
        this.list = [...this.list];
      }

      public toggleFixedDepth() {
        this.options.fixedDepth = !this.options.fixedDepth;
      }

      public drag(e: any) {
        console.log(e);
      }

      public drop(e: any) {
        console.log(e);
      }

      public onDisclosure(e: any) {
        console.log(e);
      }
      
      ngOnInit(): void {
      }

    }

这是我的html代码

<ngx-nestable class="ngx-nestable col-lg-6"
    (drag)="drag($event)"
    (drop)="drop($event)"
    (disclosure)="onDisclosure($event)"
    [(list)]="list"
    #nestable
    [options]="options"
    [template]="itemTemplate"
    fxFlex="50">
</ngx-nestable>
                            
                            

<ng-template #itemTemplate let-row>
    <button mat-icon-button [ngxNestableDragHandle]="row">
        <mat-icon>drag_handle</mat-icon>
    </button>
    <button mat-icon-button  *ngIf="row.item.children && row.item.children.length; else empty_item" [ngxNestableExpandCollapse]="row">
        <mat-icon>{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>
    </button>
    <div>Item: {{row.item.id}}</div>
</ng-template>

请告诉我应该在代码文件中更改或添加什么，以便它开始工作。我试图找到一个解决方案很多天，但无济于事。

谢谢

Answer 1

只需在模板文件检查屏幕截图中添加以下代码即可解决此问题

谢谢