web-dev-qa-db-de.com

Angular2 fügt dynamischen Elementen HTML hinzu

Ich habe diesen 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);      
    }

}

Gibt es eine Möglichkeit in Angular2, dem .dynamically_created_div? HTML hinzuzufügen, da das obige Element nur zum Ende des HTML der Komponente beiträgt.

Ich habe auch versucht mit:

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

}

Aber es funktioniert nicht, weil die @ViewChild-Direktive außerhalb der Funktion sein muss und ich keine Kontrolle mehr darüber habe

Ich habe auch so versucht: 

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

Was ich nicht tun kann, weil mein Inhalt dynamisch ist und eindeutige IDs verwendet und ich [innerHtml] nicht dynamisch verwenden kann (es funktioniert nur für das, was ich zum ersten Mal in die Platte gesteckt habe, dann kann alles, was geändert wird, nicht mehr mit innerHtml arbeiten.

Ich habe Angular2 überprüft: Fügen Sie eine dynamische Komponente als untergeordnetes Element eines Containers in das DOM ein, aber es gibt dasselbe Problem, die Platzhalter sind nicht dynamisch

UPDATE:

Mein Code ist etwas komplexer:

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>

Ich habe versucht, nur ngFor zu verwenden, aber jetzt bekomme ich es

Cannot set property 'cases' of undefined
8
Daniel S

Was ist das Problem bei diesem Ansatz?

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

}

Vorlage:

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

sie können ngfor verwenden und Sie können Elemente darin erstellen, und mithilfe des Index können Sie verschiedene IDs und Namen erstellen. Ich mache etwas wie dieses. Ich weiß nicht, ob Sie dasselbe tun wollen, aber hier ist mein Code, um einige Eingaben dynamisch zu erstellen und hinzuzufügen oder auf ihre Werte zugreifen

<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