Question

我在页面中有一个离子卡列表元素，我想在进入视图时导航到特定位置，页面呈现正确，我可以在生成的代码中看到具有特定id的div确实在查看但尝试通过id获取元素返回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，因此我在日志中收到以下错误：

chromium: [INFO:CONSOLE(57687)] "TypeError: Cannot read property 'offsetTop' of null", source: file:///android_asset/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

离子2离子卡getElementById返回null

1 个答案: