时间戳

首页 > 解决方案 > Angular 8不显示数组

angular - Angular 8不显示数组

问题描述

我正在开发一个数组中有 10 个对象的项目。组件 html 中将显示一个对象，每次单击时都会显示数组中的下一个对象。 

send = [ 
{"id":1,  "img":"assets/level/1.jpg"},
{"id":2,  "img":"assets/level/2.jpg"},
{"id":3,  "img":"assets/level/3.jpg"},
{"id":4,  "img":"assets/level/4.jpg"},
{"id":5,  "img":"assets/level/5.jpg"},
{"id":6,  "img":"assets/level/6.jpg"},
{"id":7,  "img":"assets/level/7.jpg"},
{"id":8,  "img":"assets/level/8.jpg"},
{"id":9,  "img":"assets/level/9.jpg"},
{"id":0,  "img":"assets/level/0.jpg"},];

问题是如果我转到组件 html 并输入 src {{send.img}}，它不会显示任何图像。

这是我的 html.component

<div class="w3-col s12 m6 l6" id="level">
            <div id="test">
                <img class="w3-round w3-mobile" width="500" height="300" src="{{level.img}}">
                <input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text">
                <button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile">SUBMIT</button>
            </div>
        </div>

请问，我该如何解决这个问题？

标签： angular

解决方案

数组应该使用indexes.

例如： {{send[0].img}}或{{send[1].img}}

要使其动态化，您应该使用循环（ngFor 是角循环）

你应该loop an array打电话给objects里面，

您需要投入使用image tag才能显示图像。

[src]="item.img"

<div *ngFor="let item of send">
    <img [src]="item.img" alt="image not available"/>
</div>

编辑：根据您的问题更新代码：

组件代码：

let level;

let send = [
{"id":1,  "img":"assets/level/1.jpg"},
{"id":2,  "img":"assets/level/2.jpg"},
{"id":3,  "img":"assets/level/3.jpg"},
{"id":4,  "img":"assets/level/4.jpg"},
{"id":5,  "img":"assets/level/5.jpg"},
{"id":6,  "img":"assets/level/6.jpg"},
{"id":7,  "img":"assets/level/7.jpg"},
{"id":8,  "img":"assets/level/8.jpg"},
{"id":9,  "img":"assets/level/9.jpg"},
{"id":0,  "img":"assets/level/0.jpg"}];

currentIndex = 0;

level = send[currentIndex]

nextClicked(currentIndex) {
    this.currentIndex = this.currentIndex + 1;
    if(this.currentIndex == (this.send.length - 1)){
       this.currentIndex = 0;
    }
    this.level = this.send[this.currentIndex]
}

HTML 代码：

<div class="w3-col s12 m6 l6" id="level">
    <div id="test">
        <img class="w3-round w3-mobile" width="500" height="300" src="{{level.img}}">
        <button class="w3-btn w3-round w3-brown w3-margin-left w3-mobile" (click)="nextClicked(currentIndex)">Next</button>
        <input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text">
        <button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile">SUBMIT</button>
    </div>
</div>

推荐阅读