Bonjour,

Je développe actuellement un projet Ionic, celui-ci permettra de diffuser l'actualité des jeux de l'esprit.
Je rencontre un problème depuis que j'ai implémenté Firebase et que je souhaite boucler sur mes différents articles à afficher.

Je souhaite diffuser des parties de jeu de dames en direct et pour cela je veux utiliser un module externe en javascript.

Voici mon index.html :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>

Le fichier home.ts où est déclaré la fonction qui m'est utile :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
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(){
    new divs2applet();
  }
 
  navigate(id: string){
    console.log('testetstest')
    console.log('id :', id);
    this.navCtrl.push('ArticlePage',{id:id});
  };
}
Et le fichier home.html où je boucle sur mes différents articles, et en fonction de leur type, j'affiche le damier grâce au module externe.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<ion-header>
  <ion-navbar>
    <ion-title text-align="left">
    <img alt="logo" height="30" src="assets/imgs/logo_draughts_news.png">
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content class="cards-bg">
  <ion-list>
    <ion-item *ngFor="let item of (items | async)?.slice().reverse()" text-wrap>
      <ion-card *ngIf="item.type === 1" tappable (click)="navigate(item.id)" class="cards-bg">
        <img src="assets/imgs/chpt2017.jpeg"/>
        <ion-card-content>
            <ion-card-title>
                {{item.titre}}
            </ion-card-title>
            <p>
                {{item.titre2}}
            </p>
          </ion-card-content>
      </ion-card>
 
     <ion-card *ngIf="item.type === 2" tappable (click)="navigate(item.id)" class="cards-bg">
        <ion-card-content>
            <ion-card-title>
                {{item.titre}}
            </ion-card-title>
        </ion-card-content>
        <div class='applet'>
          [Event "Nationale Clubcompetitie KNDB 2013/2014"]
           [Site ""]
           [White "truc"]
           [Black "muche"]
           [Result "0-2"]
           [GameType "20"]
           [Round "8"]
           [Date "2014.01.11"]
           [WhiteTime ""]
           [BlackTime ""]
           [WhiteUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=1069"]
           [BlackUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=3073"]
           [WhitePhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/1069.jpg"]
           [BlackPhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/3073.jpg"]
           [WhiteFlagUrl "http://toernooibase.kndb.nl/Clublogos/CEMA - De Vaste Zet Geleen.gif"]
           [BlackFlagUrl "http://toernooibase.kndb.nl/Clublogos/WSDV Wageningen.gif"]
           [WhiteRating "1026"]
           [BlackRating "3208"] 
           1. 34-30 20-25 2. 31-27 25x34 3. 39x30 17-21 4. 44-39 21-26 5. 50-44 11-17 6. 30-25 19-24 7. 27-21 16x27 8. 32x21 14-20 9. 25x14 10x19 10. 21-16 5-10 11. 37-31 26x37 12. 41x32 6-11 13. 40-34 10-14 14. 44-40 18-23 15. 34-29 23x34 16. 40x20 15x24 17. 49-44 12-18 18. 47-41 8-12 19. 41-37 4-10 20. 46-41 10-15 21. 44-40 18-23 22. 32-28 23x32 23. 37x28 12-18 24. 39-34 7-12 25. 16x7 2x11 26. 41-37 14-20 27. 37-32 1-7 28. 42-37 9-14 29. 37-31 3-9 30. 34-29 20-25 31. 29x20 15x24 32. 43-39 11-16 33. 31-26 18-22 34. 32-27 22x31 35. 36x27 24-29 36. 33x24 19x30 37. 35x24 16-21 38. 27x16 7-11 39. 16x18 13x35 40. 24-20 25-30 41. 20-15 30-34 42. 38-33 9-13 43. 48-42 13-19 44. 42-37 19-24 45. 33-28 35-40 46. 26-21 17x26 47. 28-22 40-44
          </div>
      </ion-card>
    </ion-item>
  </ion-list>
</ion-content>


Mais cela ne fonctionne pas dans la boucle *ngFor :

Nom : Capture d’écran 2018-02-27 à 13.30.24.png Affichages : 2373 Taille : 81,0 Ko

Au lieu d'afficher cela :

Nom : Capture d’écran 2018-02-21 à 13.44.38.png Affichages : 2251 Taille : 30,0 Ko

Je pense que l'appel de divs2applet() dans ngOnInit() doit se faire ailleurs ou autrement.
Je n'explique pas que cela fonctionne en dehors d'une boucle et pas dedans ...

Merci d'avance de votre aide.
Husko