引导模式 + Angularfire2

Posted 2023-02-22

【中文标题】引导模式 + Angularfire2

【英文标题】：Bootstrap Modal + Angularfire2

【发布时间】：2017-12-09 08:50:17

【问题描述】：

大家好，我试图让引导模式与 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

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

【问题讨论】：

尝试将(utilfaqsStream | async) 更改为utilfaqsStream

现在按钮消失了...

【参考方案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"。

【讨论】：

我现在有问题，不能绑定到“目标”，因为它不是“按钮”的已知属性。 ("ge 模态 -->

为您的对象添加一个 id，并按照我在答案末尾解释的方式进行操作。因为您的utilfaq.tema 可能包含无效字符。

我该怎么做？

在创建utilfaq 对象的位置添加id，这样当您创建utilfaq.id 时，每个utilfaq 都会有不同的ID。

@DiogoPinto 你能更新你的问题代码吗？那我可以看看吗？并且可能添加数据对象的示例 (utilfaqsStream)？