在Angular ng模板中动态加载剑道滚动视图不起作用

Question

我正在尝试通过从数据库中提取 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)

}

控制台.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)

基本上，">

项目"是未定义的，无法在HTML中读取"标题"或"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。