模板引用属性缺失

如何解决模板引用属性缺失

我正在将我的 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>

请告诉我我应该在代码文件中更改或添加什么以便它开始工作我已经搜索了很多天但没有运气请帮助我的朋友

谢谢