Angular 2+在html中显示数组项

Question

我最近开始学习 Angular 并想创建一个 slider 。

我创建了一个对象数组来保存 slider 图像的数据，并尝试将它们显示在我的组件 html 文件中，如下所示:

TS文件:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

    const arr: sliderImgMeta = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}

和 html 文件:

<section id="slider">
  <div id="slider-content">
    <img src="{{arr[0].src}}" alt="{{arr[0].alt}}">
  </div>
  <div id="slider-navigation">
    <span id="moveLeft"><</span>
    <span id="moveRight">></span>
  </div>
</section>

作为返回，我得到了 ERROR TypeError: Cannot read property '0' of undefined 不幸的是不知道如何解决它。

Answer 1

你的类中没有 arr 属性，而是在 ngOnInit 中创建了只能在其中访问的变量，尝试这种方式并注意 sliderImgMeta 类型应该在类之外

import { Component, OnInit } from '@angular/core';

type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {
  arr: sliderImgMeta = [];
  constructor() { }

  ngOnInit() {
    this.arr = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}