Bootstrap Modal + Angularfire2

Question

Hello everyone, im trying to put bootstrap modal working with angularfire2 but im having a error. It doesnt recognize the data that cames from the DB.

<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>

This is the HTML where i have the Bootstrap modal.

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

  }

  



}

And this is .ts file where i have the db config.

The error im getting is

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

I have no idea why is this happening, if i have the data outside the modal it works.... can someone solve this problem ?

Try changing `(utilfaqsStream | async)` for `utilfaqsStream` — SrAxi, Jul 05 '17 at 15:29

SrAxi · Accepted Answer · 2017-07-05T15:43:40.033

1

Ah! Of course!

You are looping utilfaqsStream inside the <button> tag, therefore, the variable utilfaq is only defined within that tag.

You should loop also the divs (modals) and reference each one of them.

Try something like this:

// 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>

What we want to do in the button is refence the model of the same utilfaq. So, instead of referencing a class, we reference an id, hence data-target="#{{utilfaq.tema}}".

And, in the modals, we will build the id dynamically, hence: id="{{utilfaq.tema}}".

If your utilfaq object had an id property would be perfect, you could build a nicer modal id, example: id="modal_{{utilfaq.id}}" and data-target="#modal_{{utilfaq.id}}".

edited Jul 05 '17 at 15:43

answered Jul 05 '17 at 15:38

SrAxi

19,787
11
46
65

Im having problems now, with Can't bind to 'target' since it isn't a known property of 'button'. ("ge modal --> – Diogo Alexandre Jul 05 '17 at 15:44
Ad an id to your object, and do it like I explain at the end of my answer. Because probably your `utilfaq.tema` has invalid characters. – SrAxi Jul 05 '17 at 15:46
How should i do that ? – Diogo Alexandre Jul 05 '17 at 15:48
Where you create your `utilfaq` object, you add an `id`, so that when you do `utilfaq.id` you'll have a different id for each `utilfaq`. – SrAxi Jul 05 '17 at 15:50
@DiogoPinto Can you update your question's code? So I can have a look? And maybe add an example of the data object (`utilfaqsStream`)? – SrAxi Jul 05 '17 at 15:56
Can you move this to chat please ? – Diogo Alexandre Jul 05 '17 at 16:00
I have a random key generated, can i use that insted of the id ? – Diogo Alexandre Jul 05 '17 at 16:05
@DiogoPinto Yes, you could. Or you could use the index of both ngFor. Check this: https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute – SrAxi Jul 07 '17 at 07:54

Bootstrap Modal + Angularfire2

1 Answers1