web-dev-qa-db-fra.com

Angular2 ajoute du HTML aux éléments dynamiques

J'ai ce code:

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<button (click)="runR()">Run</button>
<div class="testme">
    <div class="somediv">
        <div class="dynamically_created_div unique_identifier"></div>
        <div class="dynamically_created_div unique_identifier"></div>
        <div class="dynamically_created_div unique_identifier"></div>
    </div>
</div>',
})

export class AppComponent{
    hostEl: any;

    constructor(
        private el:ElementRef,
        private renderer:Renderer2,
    )  {
        this.hostEl = el.nativeElement;
    }

    runR(){
        let change_this;
        change_this= this.renderer.createElement('span');
        this.renderer.addClass(change_this, 'change_this');
        this.renderer.appendChild(this.hostEl, change_this);      
    }

}

Existe-t-il un moyen dans Angular2 d’ajouter du HTML au .dynamically_created_div? Parce que ce qui précède n’ajoute que la fin du HTML du composant.

J'ai aussi essayé avec:

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<button (click)="runR()">Run</button>
<div class="testme">
    <div class="somediv">
        <div class="dynamically_created_div">

        </div>
    </div>
</div>
  `,
})
export class AppComponent {
  constructor(private renderer:Renderer) {}

    runR() {
        @ViewChild('dynamically_created_div') d1:ElementRef;
        this.renderer.invokeElementMethod(this.d1.nativeElement, 'insertAdjacentHTML', ['beforeend', '<div class="new_div">new_div</div>'] );
    }

}

Mais ça ne marche pas parce que la directive @ViewChild doit être en dehors de la fonction et que je ne peux plus la contrôler

J'ai aussi essayé comme ça: 

<div class="dynamically_created_div" [innerHtml]="newHTML"></div>
this.newHTML = '<div class="new_div">new_div</div>';

Ce que je ne peux pas faire, c'est que mon contenu est dynamique et utilise des identifiants uniques et que je ne peux pas utiliser [innerHtml] de manière dynamique (cela ne fonctionne que pour ce que j'ai mis dans le modèle pour la première fois. Toute modification ne pouvant plus utiliser innerHtml.

J'ai vérifié Angular2: Insérez un composant dynamique en tant qu'enfant d'un conteneur dans le DOM mais le problème persiste, les espaces réservés ne sont pas dynamiques.

METTRE À JOUR:

Mon code est un peu plus complexe:

TS:

import { AfterContentInit, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { NgForm, FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { SFService } from '../services/sf.service';
import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    providers: [ SFService ],
})

export class AppComponent implements OnInit {
    constructor(
        private sfservice: SFService,
    ) {}

    ngOnInit(){
        this.sfservice.getMembers().subscribe(members => {
            this.members = members.members;
        });
    }


    members: Member[];
    member_selector: Member[];

    member_each: Member;
    member_selector_each: Member[];
    cases: Case;

    runR(){

        this.members.forEach(member_each => {
            this.member_selector.forEach(member_selector_each => {
                if(member_each.Id === member_selector_each.Id){
                    console.log(member_selector_each.Id);
                    this.sfservice.getCaseHistory(member_selector_each.Id, "2017-04-25T00:00:00", "2017-04-28T23:59:59").subscribe(cases => {

                        this.member_each['cases'] = cases;
                        console.log(this.member_each);
                    });
                }
            })
        })
    }
}

HTML:

<form #myForm="ngForm" novalidate>
    <select name="member_selector_name" [(ngModel)]="member_selector" multiple ng-model="selectedValues" style="height:200px;">
        <option *ngFor="let member of members" [ngValue]="member">{{member.Name}}</option>
    </select>
    <button (click)="runR()">Run</button>
</form>

<div id="results">
    <div *ngFor="let mem of members" class="member-card-{{mem.Id}}">
        <div class="card-container">
             <div *ngFor="let case of mem.Cases" class="case-card" id="{{case.Id}}">{{case.Number}}
             </div>
        </div>
    </div>
</div>

J'essayais d'utiliser seulement ngFor mais maintenant je reçois

Cannot set property 'cases' of undefined
javascripthtmlangularjs
8
Daniel S

Quel est le problème avec cette approche?

export class AppComponent{
    @ViewChild('d1') d1:ElementRef;
    @ViewChild('d2') d2:ElementRef;
    @ViewChild('d3') d3:ElementRef;

    constructor(private renderer:Renderer2)  {    }

    runR(){
        let change_this;
        change_this= this.renderer.createElement('span');
        this.renderer.addClass(change_this, 'change_this');
        this.renderer.appendChild(this.d1, change_this);
    }

}

Modèle:

<div class="dynamically_created_div unique_identifier" #d1></div>
<div class="dynamically_created_div unique_identifier" #d2></div>
<div class="dynamically_created_div unique_identifier" #d3></div>
7
Max Koretskyi aka Wizard

vous pouvez utiliser ngfor et créer vos éléments à l'intérieur et utiliser index, vous pouvez créer différents identifiants et noms . ou accéder à leurs valeurs 

<div *ngFor="let comp of templateVals | async;let i=index">

  <md-input-container class="example-90" *ngIf="comp.type=='code'">
    <textarea rows="4"  mdInput  name="desc{{i}}" [(ngModel)]="comp.data" placeholder="Description"></textarea>
  </md-input-container>
  <md-input-container class="example-90" *ngIf="comp.type=='text'">
    <textarea rows="4"  mdInput name="text{{i}}" [(ngModel)]="comp.data" placeholder="Text"></textarea>
  </md-input-container>
  <md-input-container class="example-90" *ngIf="comp.type=='title'">
    <input mdInput name="title{{i}}" [(ngModel)]="comp.data" placeholder="Title">
  </md-input-container>
  <span class="example-90" *ngIf="comp.type=='upload'">

    <input-file *ngIf="!comp.data" [acceptId]="comp.id"  (onFileSelect)="addedFileInfo($event)"></input-file>
  <span *ngIf="comp.data">{{comp.data}}</span>

  </span>
  <span class="example-10">
  <button md-mini-fab (click)="removeThis(comp)"><md-icon>remove circle</md-icon></button>
    </span>
</div>

0
fastAsTortoise