代码之家 › 专栏 › 技术社区 › aMJay

角度2+显示html中的数组项

angular

3

aMJay · 技术社区 · 7 年前

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

我创建了一个对象数组,用于保存滑块图像的数据,并尝试在我的组件html文件中显示它们,如下所示:

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

2 回复 | 直到 7 年前

1

2

Artyom Amiryan 7 年前

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

}

2

0

Emircan Ok 7 年前

    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() {

      }

    }