在Angular ng-template中动态加载kendo ScrollView不起作用

Posted 2023-03-13

【中文标题】在Angular ng-template中动态加载kendo ScrollView不起作用

【英文标题】：Dynamically loading kendo ScrollView in Angular ng-template not working

【发布时间】：2020-01-26 02:13:29

【问题描述】：

我正在尝试通过从数据库中提取 items[] 来使此示例动态化： https://stackblitz.com/edit/angular-gbonf1?file=app/app.component.ts

因此，我调用一个服务来加载项目：

 public isFormReady: boolean = false;
 public items: any[] = [];
//loading items
 ngOnInit() 
this.isFormReady = false;
this._gwfoService.GetScrollViewItems().subscribe(
  (result: ScrollViewItems[]) => 
    this.items = result;
    console.log('items', this.items);
  
);
this.isFormReady = true;
//after loading all controls
setInterval(() => 
  this.scrollview.next();
, 5000)

console.log 给了我： 项目

Array(3)
0: title: "2019 Anti-Money Laundering training due by 10/21/2019", url: "https://..path../Content/img/SV02.png"
1: title: "Hierarchy going live on....", url: "https://..path../Content/img/SV03.jpg"
2: title: "GWFO Town Hall on 7/25/2019", url: "https://..path../Content/img/SV01.jpg"
length: 3
__proto__: Array(0)

我得到的错误是：

MyComponent.html:17 ERROR TypeError: Cannot read property 'title' of undefined
    at Object.eval [as updateRenderer] (MyComponent.html:17)

基本上，“item”是未定义的，无法读取 HTML 中的“title”或“url”。请指导我应该如何定义 let-item="item" 或修复我的代码。我不知道 let-item="item" 是否是 *ngFor="let item of items" 的另一种表示法。我尝试更换但没有用。这是 HTML：

<div class="container" *ngIf="isFormReady==true">
  isFormReady isFormReady
  <div style="background-image:url('https://...my path/Resources/images/Header.png');
          background-size:cover; color:#ffffff; height: 300px; text-shadow:0.25px 0.25px #000000;">

       <kendo-scrollview #scrollview
                          [data]="items"
                          [width]="width"
                          [height]="height"
                          [animate]="animate"
                          [arrows]="true"
                          [endless]="true"
                          [pageable]="true">

          <ng-template let-item="item">
            <h2 class="demo-title">item.title</h2>
            <img src='item.url' alt='item.title'
                 [ngStyle]="minWidth: width"
                 draggable="false" />
          </ng-template>
        </kendo-scrollview>

      </div>

【参考方案1】：

在填充items 之前，不要渲染kendo-scrollview。

【讨论】：

Noremac，根据您的建议，我已经更新了我的代码，因此现在正在加载标题和网址。但是，现在我收到错误：错误类型错误：无法读取未定义的属性“下一个”。它正在抛出 this.scrollview.next();

在设置this.items 后在订阅中移动setInterval(() => this.scrollview.next(); , 5000)。 *ngIf 添加到 kendo 滚动视图以修复最后一个问题，删除了 DOM 的元素。由于在 DOM 中找不到 #scrollview，因此在 ngOnInit() 运行时未定义 this.scrollview，但在设置 this.items 后，this.scrollview 将定义一个更改检测周期。

诺马克，非常感谢！我永远不会意识到 *ngIf 正在从 DOM 中删除 #scrollview