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

Question

我正在尝试通过从数据库中提取项目[] 来使此示例动态化： 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>

Answer 1

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

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

Dynamically loading kendo ScrollView in Angular ng-template not working

angular

kendo-ui

ng-template