zuck js库在新窗口中无法读取null的属性'id'.ZuckitaDaGalera.window [英] zuck js library cannot read property 'id' of null at new window.ZuckitaDaGalera.window

问题描述

我正在尝试使用zuck.js在我的离子3应用程序中实现故事，我收到此错误

I'm trying to implement stories using zuck.js in my ionic 3 app and I get this error

Cannot read property 'id' of null at new window.ZuckitaDaGalera.window.Zuck (http://localhost:8100/build/vendor.js:115204:23) at new HomePage 

我查看了 docs 看起来我发送了正确的数据，但我得到了这个错误并且实际上坚持了它。

I checked in docs and it looks like I send the right data but I get this error and actually stuck with it.

主页组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import 'zuck.js/zuck.js';
declare var Zuck;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  stories = new Zuck('stories', {
    backNative: true,
    autoFullScreen: 'false',
    skin: 'Snapgram',
    avatars: 'true',
    list: false,
    cubeEffect: 'true',
    localStorage: true,
    stories: [
      {
        id: 'vision',
        photo: 'https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg',
        name: 'Tech',
        link: '',
        lastUpdated: 1492665454,
        items: [
          this.buildItem('1', 'photo', 3, 'https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg', '', false, 1492665454,''),
          this.buildItem('2', 'photo', 3, 'https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804', '', '', false, 1492665454),
          this.buildItem('3', 'video', 0, 'https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4', 'https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg', '', false, 1492665454),
        ],
      }],
  });

  constructor(public navCtrl: NavController) {

  }
  buildItem(id, type, length, src, preview, link, seen, time) {

    // Using object short-hand (id: id)
    return {id,type,length,src,preview,link,seen,time,
    };

    }

}

html视图

<div id="stories"></div>

推荐答案

你需要把你的 Zuck 相关代码，其中包含 div 的当前模板已经可用。目前它是 null ，因为您试图在组件准备好之前访问模板。将代码放入 ionViewDidEnter（）应该可以正常工作。

You need to put your Zuck related code somewhere where the current template with your div is already available. Currently it is null because you are trying to access the template before the component is even ready. Putting the code into ionViewDidEnter() should work.

同时声明故事这样的变量：

let stories = ...

并将 buildItem（）方法移出构造函数体，这不是功能属于。

And move the buildItem() method out of the constructor-body, thats not where a function belongs.

这篇关于zuck js库在新窗口中无法读取null的属性'id'.ZuckitaDaGalera.window的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！