离子2离子卡getElementById返回null

Question

我在页面中有一个离子卡列表，我想在输入视图时导航到特定位置，页面正确渲染，我可以在生成的代码中看到该页面具有特定ID的div确实在视图中，但试图通过ID获取元素的DIV返回null。

这是我构建卡片的视图的代码：

<ion-content class="cards-bg">
  <ion-card *ngFor="let meal of meals">
      <ion-card-header>
        {{meal.date | date: 'dd/MM/yyyy HH:mm'}}
      </ion-card-header>
      <div id="{{meal.id}}">
        <img src="{{serverUrl + '/' + meal.picture}}">
      </div>
    <ion-card-content>
      <ion-card-title>
        {{meal.title}}
      </ion-card-title>
      <p>{{meal.description}}</p>
    </ion-card-content>
  </ion-card>
  <ion-row no-padding></ion-row>
</ion-content>

这是试图获取对元素的引用的代码，因此我可以导航到它：

public index: string;
  constructor(public navCtrl: NavController, navParams: NavParams, public mealService: MealService) {
     this.index = navParams.get('index');
  }
  ionViewDidEnter() {
    this.mealService.getMeals().then((result) => {
      this.meals = result;
      let yOffset = document.getElementById(this.index).offsetTop;
      this.content.scrollTo(0, yOffset, 1000);
    }).catch((error) => {
      console.log(error);
    });

正如我提到的带有卡片渲染的页面一样，我什至可以看到生成的代码包含带有ID的特定div，但调用：

document.getElementById(this.index)

返回null，所以我在日志中收到以下错误：

铬：[信息：console（57687）]＆quot; typeError：无法读取null＆quot of null＆quort＆quort; source：file：///android_asset/www/www/www/build/main.js（57687）

Answer 1

使用Angular's ElementRef

将其注入构造函数：

constructor(private elRef:ElementRef){}

获取元素，

let el = this.elRef.nativeElement;//get underlying native element.
let yOffset = el.getElementById(this.index).offsetTop;

或者您也可以使用ViewChildren：

为DIV设置ID：

  <div #divElement id="{{meal.id}}">
    <img src="{{serverUrl + '/' + meal.picture}}">
  </div>

将装饰器设置在类变量上：

@ViewChildren('divElement')
divs:any;

用于访问元素，

let yOffset = this.divs[this.index].nativeElement.offsetTop