Angular 使用*ngFor改变行为
我使用Ionic显示firebase中数据的一些卡片 在某些卡片中，我需要调用javascript函数Angular 使用*ngFor改变行为,angular,Angular,我使用Ionic显示firebase中数据的一些卡片 在某些卡片中，我需要调用javascript函数divs2applet（）。 此函数来自显示Drughts游戏的模块extern。 我把它放在我的home.ts的ngOnInit（）中。 但是我们可以猜测调用divs2applet（）是不正确的，因为数据是以文本显示的 当我在没有*ngFor的情况下使用它时，它会工作 这是我的index.html，我在这里集成了这个模块的脚本： <!DOCTYPE html> <html l
divs2applet（）home.ts的ngOnInit（）
中。
但是我们可以猜测调用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>
这就是应该显示的内容：
但我有：
我不明白为什么在这种情况下ngOnInit（）中的调用不起作用。
告诉你，我是新手
谢谢您的帮助。您在组件中导入了divs2applet（）吗？我不知道我是否这样做了：D如何做？但如果我只写。。。。。没有ngFor，我没有问题。我认为div2applet（）不是在适当的时候调用的，因为我循环来自firebase的数据。
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});
};
}
<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" 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 "Quentin"]
[Black "Mélanie"]
[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>