javascript - Angular 5: Access element inner html from the component for dynamically generated elements - Stack Overflow

admin管理员组

文章数量:1391998

I have an angular ponent in my ponent I need to access the inner html of element. For this I am able to get this for single element using ViewChild with template ref. but in the ngFor when I generate element and template ref dynamically it did not work. here is the error showed in console : -

Cannot read property 'native Element' of undefined

Here is the code for single element:-

@ViewChild('emailBodyContainer') emailBodyContainer: ElementRef;
<div [innerHtml]="emailTemplate.mailBody" #emailBodyContainer>

For dynamic elements: -

<div *ngFor="let i of reminderTemplates" class="container tab-pane text-center py-4 [innerHtml]="i.mailBody" #{{i.type}}></div>

Please help me to solve this. Thanks in advance :)

I have an angular ponent in my ponent I need to access the inner html of element. For this I am able to get this for single element using ViewChild with template ref. but in the ngFor when I generate element and template ref dynamically it did not work. here is the error showed in console : -

Cannot read property 'native Element' of undefined

Here is the code for single element:-

@ViewChild('emailBodyContainer') emailBodyContainer: ElementRef;
<div [innerHtml]="emailTemplate.mailBody" #emailBodyContainer>

For dynamic elements: -

<div *ngFor="let i of reminderTemplates" class="container tab-pane text-center py-4 [innerHtml]="i.mailBody" #{{i.type}}></div>

Please help me to solve this. Thanks in advance :)

• javascript
• angular
• ngfor
• viewchild

Share Improve this question Follow edited Aug 2, 2018 at 13:36 Alex Ananjev 27933 silver badges1616 bronze badges asked Aug 2, 2018 at 12:44 KhemrajKhemraj 10911 silver badge99 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Try something like this:

DEMO

<div *ngFor="let i of arr;let j = index" id=item{{j}}>
    {{i}}
</div>

TS:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent implements AfterViewInit {

  arr: Array<any> = [1, 2, 3, 4]

  ngAfterViewInit() {
    let data1 = document.getElementById('item0')
    let data2 = document.getElementById('item1')
    let data3 = document.getElementById('item2')
    let data4 = document.getElementById('item3')
    console.log(data1)
    console.log(data2)
    console.log(data3)
    console.log(data4)
  }
}

For Mat-Tab:

DEMO

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

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild("main") main: ElementRef;

  name = 'Angular';
  Tabs: Array<any> = [{ name: 'Tab1' }, { name: 'Tab2' }, { name: 'Tab3' }]

  ngAfterViewInit() {
    let el = document.getElementById("main");


    console.log(el);

    let elh = el.children.item(0).children.item(1).children.item(0).children.item(0).children;

    elh.item(0).setAttribute("style", "color:red;")

    elh.item(1).setAttribute("style", "color:green;")

    elh.item(2).setAttribute("style", "color:cyan;")
  }

}

HTML:

<mat-tab-group id = "main">
    <mat-tab *ngFor="let tab Of Tabs;let i= index" [label]="tab.name"> Content {{i}} </mat-tab>
</mat-tab-group>

You can use something like this.

<div *ngFor="let i of reminderTemplates" class="container tab-pane text-center py-4 [innerHtml]="i.mailBody" #items></div>

In ponent:

@ViewChildren('items') items: QueryList<ElementRef>;

console.log(this.items); // print the list of items

本文标签：