Bootstrap 模态 + Angularfire2

Question

大家好，我正在尝试将 bootstrap 模态与 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>

这是 HTML，我有 Bootstrap 模式。

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'
      }
    });

  }

  



}

这是我有数据库配置的 .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。因此，我们没有引用 class，而是引用 id，因此 data-target="#{{utilfaq.tema}}".

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

如果你的 utilfaq 对象有一个 id 属性就完美了，你可以建立一个更好的模态 ID，例如：id="modal_{{utilfaq.id}}"和 data-target="#modal_{{utilfaq.id}}".

Bootstrap 模态 + Angularfire2

Bootstrap Modal + Angularfire2

bootstrap-modal

angularfire2

angular