angular - 在Angular ng-template中动态加载kendo ScrollView不起作用
问题描述
我试图通过从数据库中提取 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)
基本上“项目”是未定义的,无法读取 HTML 中的“标题”或“网址”。请指导我应该如何定义 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>
解决方案
在填充kendo-scrollview
之前不要渲染。items
推荐阅读
- apache-kafka - 如何设置 kafka-connect 连接器和任务的 JVM 堆大小?
- html - 如何创建 CSS 框布局?
- javascript - 错误 500 后是否可以从 PHP 向 Ajax 返回值?
- django - 如何将 Django FileField 与动态 Amazon S3 存储桶一起使用?
- c# - 无法从 Android 应用程序接收 Windows 10 UWP 中的 UDP 广播
- ios - 如何在 Charts iOS Swift 中的图标和标签之间留出空间?
- java - Hibernate Criteria API 中 Restrictions.and() 和 Restrictions.conjuction() 之间的区别
- soap - 将属性加载到基于 Weblogic 托管服务器的应用程序中
- php - Laravel 无法使用 json_decode 从 Guzzle 返回嵌套数据
- fabricjs - 如何通过在fabric.js画布中单击按钮来删除网格线