[英]I need to dynamically allocate an object array to an image carousel container in angular using a loop populated within the component class
My issue rests on what I believe to be a misuse of the image carousel html code structure.我的问题在于我认为滥用图像轮播 html 代码结构。 Here is my Html:
这是我的 Html:
<div id="carousel-trades" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let ytd of yourTrades; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img style="width:310px;height:310px" [src]="splitImageString(ytd.tradeUrl)" (click)="pickImageForTrade(yourTradeImage)"
alt="First slide">
</div>
</div>
</div>
Also I there is the possibility that the array "yourTrades" is not being initialized due to being out of scope.此外,由于不在 scope 范围内,数组“yourTrades”可能未初始化。
component.ts file:组件.ts 文件:
yourTrades: Trade[];
ngOnInit(): void {
this.resetForm();
this.serviceTrade.getUserId()
.subscribe(data => {
this.myId = data;
let yourTrades = new Array();
for (let i = 0; i < this.trades.length; i++) {
if (this.myId.userId == this.trades[i].userId) {
yourTrades.push(this.trades[i]);
}
}
console.log(yourTrades);
})
}
When I call console.log I get the expected array of objects but when my carousel renders it returns empty.当我调用 console.log 时,我得到了预期的对象数组,但是当我的轮播呈现时,它返回空。 It must be the fact that there may be a wrong connection from when "yourTrades" is populated to when it is used by the html?
一定是从“yourTrades”被填充到被 html 使用时可能存在错误连接的事实?
Change your caraousel html to:-将您的旋转木马 html 更改为:-
<div id="carousel-trades" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let ytd of yourTrades; let i = index" class="carousel-item" [ngClass]="{'active': i===0}">
<img style="width:310px;height:310px" [src]="splitImageString(ytd.tradeUrl)" (click)="pickImageForTrade(yourTradeImage)"
alt="First slide">
</div>
</div>
</div>
You aren't assigning the yourTrades
variable inside the subscription to the member variable.您没有将订阅中的
yourTrades
变量分配给成员变量。 Try the following尝试以下
yourTrades: Trade[] = []; // <-- assign empty array
this.serviceTrade.getUserId()
.subscribe(data => {
this.myId = data;
for (let i = 0; i < this.trades.length; i++) {
if (this.myId.userId == this.trades[i].userId) {
this.yourTrades.push(this.trades[i]); // <-- directly push to the member variable
}
}
console.log(this.yourTrades);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.