行为随* ngFor而变化

时间:2018-04-19 05:57:39

标签: angular

我使用Ionic从firebase中的数据中显示一些卡片。

在某些卡片中,我需要调用javascript函数divs2applet()。 此功能来自显示草稿游戏的模块外部。 我把它放在我ngOnInit()的{​​{1}}中。 但我们可以猜测home.ts的调用不正确,因为数据以文本显示。

当我在没有divs2applet()的情况下使用它时,它可以工作......

这是我的*ngFor,我整合了这个模块的脚本:

index.html

我的家。:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->
  <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
  <link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/jquery.contextMenu.css' rel='stylesheet' type='text/css'>
  <!--<link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view.css' rel='stylesheet' type='text/css'>-->

  <link href="test.css" rel="stylesheet">

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.easing.1.3_min.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.contextMenu_min_2.3.0.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dcoerterp_view-2.3.8.js' type='text/javascript'> </script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dambord.js' type='text/javascript'> </script>


  <script type='text/javascript'>
  function getOptions(appletID)
    {
      var opties = {
          showNotation:false, //montrer la notation près du plateau
          showGameList:false, //si plusieurs parties PDN, une boîte de sélection montrant dessus du plateau
          showSlider:false, //montrer un curseur de la progresssion de la partie sous le plateau
          showContextMenu:true, //Droit sur la carte ne montre pas ou un menu d'options
          showLastMove:false, // Dernier mouvement joué affiché sous le plateau
          closable:false, //L'applet peut être fermé avec X dans le coin supérieur droit
          squareSize: 27, //grootte van 1 speelveld (indirect bepaald dit de grootte van de totale applet
          themeURL: 'http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/pieceimages/', //emplacement où sont les images et le fond
          liveMode:true, //betreft het weergave van partijen die worden ingevoerd via electronische borden of ipads.
          liveRefreshSec: 5,
          playMode:false, //default afspeelmode
          analyseMode:false, //en mode d'analyse, vous pouvez vous mettre à jouer
          isTB:false, //L'applet est affichée via la base tournoi
          borderSize: 15, //épaisseur du bord du plateau
          borderAllAround:false, //plateau bordure sur les côtés de la carte, ou seulement au-dessus et à gauche
          gotoPly:0, //open de stand na zet x, ply 1 is bijv de eerste zet, ply 2 is de eerste witte en zwarte zet.
          m_showNotation : false, //Afficher les options de menu dans le menu peuvent activer ou désactiver l'utilisateur zetnotatie
          m_showNotationPDN : true, //Afficher les options de menu dans le menu: mode d'écran au format PDN ou désactiver
          m_showSourcePDN: true, //Afficher les options de menu dans le menu de l'écran, l'utilisateur peut «chargé PDN dans applet' ou désactiver
          m_showPhotos : false, //menuopties tonen in menu: kan gebruiker de spelerfotos aan- of uitzetten
          m_showLastMove : true, //menuopties tonen in menu: kan gebruiker de laatse zet tonen, aan- of uitzetten
          m_showSlider : false, //Afficher les options de menu dans le menu: l'utilisateur peut activer ou désactiver le curseur de la partie
          m_showFieldNumbers:false, //Afficher les options de menu dans le menu: l'utilisateur peut activer ou désactiver le numéro de champ des champs
          m_showTurnBoard : false, //Afficher les options de menu dans le menu: l'utilisateur peut exécuter l'aide par le menu
          m_takeScreenshot : true, //menuopties tonen in menu: kan gebruiker een screenshot maken van de stand
          m_enableMoveAnimation : true, //menuopties tonen in menu: kan gebruiker kiezen voor simpele vorm van schuiven van de schijven (wel of geen animatie)
          m_playVariations : false, //menuopties tonen in menu: kan gebruiker kiezen om alle varianten in de PDN af te spelen of over te slaan 
          m_startAnalyzeMode : false, //menuopties tonen in menu: kan gebruiker een analyse bord openen vanuit de applet
          m_restoreBoardLocation : false, //Afficher les options de menu dans le menu: L'utilisateur peut définir l'applet à sa place initiale et la taille après avoir traîné 
          m_showFEN : true, //Afficher les options de menu dans le menu: l'utilisateur peut interroger la FEN de la position actuelle du conseil
          m_loadPDN : true, //Afficher les options de menu dans le menu peut charger l'utilisateur PDN dans l'applet
          m_help : true //Afficher les options de menu dans le menu, l'utilisateur peut consulter l'aide

      }

      var appletDiv = $('#' + appletID);

      if (appletDiv.attr('applet_playerimages') && appletDiv.attr('applet_playerimages') == 'true') opties.showPlayerPhotos = true;
      if (appletDiv.attr('applet_full_border') && appletDiv.attr('applet_full_border') == 'true') opties.borderAllAround = true;
      if (appletDiv.attr('applet_square_size')) opties.squareSize = parseInt(appletDiv.attr('applet_square_size'), 10);
      return opties;
    }
  $(function() {
    divs2applet();
  });
  </script>

<link href="build/main.css" rel="stylesheet">
<!--<link href="main.css" rel="stylesheet">-->
</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

我显示游戏的import { Component } from '@angular/core'; import { NavController, IonicPage } from 'ionic-angular'; import { AngularFireModule } from 'angularfire2'; import {AngularFireDatabaseModule, AngularFireDatabase,AngularFireList} from 'angularfire2/database'; import {Observable} from "rxjs"; declare var divs2applet; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { itemsRef: AngularFireList<any>; items: Observable<any[]>; constructor(public navCtrl: NavController, private db: AngularFireDatabase) { this.itemsRef = db.list('article'); this.items = this.itemsRef.valueChanges(); this.items.subscribe(res=> console.log(res)); } ngOnInit(){ divs2applet(); } navigate(id: string){ console.log('testetstest') console.log('id :', id); this.navCtrl.push('ArticlePage',{id:id}); }; }

home.html

应该显示的是: works

但我有: not works

我不明白为什么ngOnInit()中的调用在这种情况下不起作用。 有关信息,我是新手。

感谢您的帮助。

0 个答案:

没有答案