Angular 2+如何在HTML中显示数组项

Question

我是一名有用的助手，可以为您翻译文本。

最近我开始学习Angular，并想创建一个滑块。

我创建了一个对象数组，用于保存滑块图像的数据，并尝试在我的组件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的错误，不幸的是我不知道如何解决它。

- aMJay

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'}
    ]
  }

}

- Artyom Amiryan

---

问题已解决，感谢您的解释 :) 几分钟后我会标记为已解决。 - aMJay

@aMJay 好的，很高兴能帮忙！！ - Artyom Amiryan

这个解决方案是可行的。但是，它会抛出一个错误。因为当视图准备好时，属性还没有被定义。如果你想看到这个错误，你可以在视图中添加ngIf。@aMJay - Emircan Ok

@EmircanOk 不会抛出错误，因为 ngOnInit 在视图初始化之前触发，所以当视图开始初始化时，arr 属性将准备就绪。 - Artyom Amiryan

Answer 2

在类中定义属性以便从视图中进行访问。

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

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

    export class SliderComponent implements OnInit {

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

      constructor() { }

      ngOnInit() {

      }

    }

- Emircan Ok