引导模式 + Angularfire2

Question

1. 大家好，我试图让引导模式与 angularfire2 一起工作，但我遇到了错误。它无法识别来自数据库的数据。

<button *ngFor="let utilfaq of (utilfaqsStream | async) | reverse" class="panel panel-default" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div  class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
     <div class="panel-body" >
                <td><h5><b>Tema</b></h5>{{utilfaq.tema}}</td>
                <hr>
                <td><h5><b>Subtema</b></h5>{{utilfaq.subtema}}</td>
                <hr>
                <td><h5><b>Erro</b></h5>{{utilfaq.erro}}</td>
                <hr>
                <td><h5><b>Solução</b></h5>{{utilfaq.solucao}}</td>
            
  </div>
    </div>
  </div>
</div>

这是我拥有 Bootstrap 模式的 HTML。

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { Subject } from 'rxjs/Subject';
import { moveIn, moveInLeft, fallIn } from '../router.animations';


interface utilfaq {

  erro: string;
  solucao: string;
  programa:string;
  tema:string;
  subtema:string;
  $key?: string;


}

@Component({
  selector: 'app-utilss',
  templateUrl: './utilsst.component.html',
  styleUrls: ['./utilsst.component.css'],
})
export class UtilsstComponent {

  readonly errosPath = "erros";

  formutilfaq: utilfaq = {

    'erro' : '',
    'solucao' : '',
    'programa' : '',
    'tema' : ',',
    'subtema' : ',',

  };



  utilfaqsStream: FirebaseListObservable <utilfaq[]>;
  constructor(db:AngularFireDatabase){
    this.utilfaqsStream = db.list('/erros/', {
      query: {
        orderByChild: 'programa',
        equalTo: 'UtilSST'
      }
    });

  }

  



}

这是我有 db 配置的 .ts 文件。

我得到的错误是

ERROR TypeError: Cannot read property 'tema' of undefined
    at Object.eval [as updateRenderer] (UtilsstComponent.html:22)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13146)
    at checkAndUpdateView (core.es5.js:12293)
    at callViewAction (core.es5.js:12653)
    at execComponentViewsAction (core.es5.js:12585)
    at checkAndUpdateView (core.es5.js:12294)
    at callViewAction (core.es5.js:12653)
    at execEmbeddedViewsAction (core.es5.js:12611)
    at checkAndUpdateView (core.es5.js:12289)
    at callViewAction (core.es5.js:12653)
View_UtilsstComponent_0 @ UtilsstComponent.html:22
UtilsstComponent.html:22 ERROR CONTEXT DebugContext_
View_UtilsstComponent_0 @ UtilsstComponent.html:22

我不知道为什么会发生这种情况，如果我有模式之外的数据它可以工作....有人可以解决这个问题吗？

Answer 1

啊！当然！

您在<button> 标记内循环utilfaqsStream，因此，变量utilfaq 仅在该标记内定义。

您还应该循环 div（模态）并引用它们中的每一个。

试试这样的：

// I removed all the stuff inside the button just for the example, don't remove yours
<button *ngFor="let utilfaq of (utilfaqsStream | async) | reverse" data-toggle="modal" data-target="#{{utilfaq.tema}}">Large modal</button>

<div *ngFor="let utilfaq of (utilfaqsStream | async) | reverse" id="{{utilfaq.tema}}" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">    
    // all the stuff inside
</div>

我们想要在按钮中做的是引用同一个utilfaq的模型。因此，我们不是引用一个类，而是引用一个id，因此是data-target="#{{utilfaq.tema}}"。

而且，在模态中，我们将动态构建 id，因此：id="{{utilfaq.tema}}"。

如果你的 utilfaq 对象有一个 id 属性会很完美，你可以构建一个更好的模式 id，例如：id="modal_{{utilfaq.id}}" 和 data-target="#modal_{{utilfaq.id}}"。