Я пытаюсь сделать этот образец динамическим, извлекая элементы [] из базы данных: 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 дает мне: items
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' не определен и не может прочитать 'title'или «URL» в 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>