Question

我是Angular 5的新成员。我想从.ts文件中获取html元素，并通过ngFor动态添加到html文件中。我尝试使用[innerHtml]执行此操作，但它无效并返回[object HTMLSelectElement]。我该如何解决这个问题？

transferDataSuccess(event) {   

var dropHere = document.getElementById('dropHere')

var dropInSettings = document.getElementById('dropInSettings')

for (var key in this.transferData) {

  if (this.transferData[key].name == event.dragData.name) {

    this.receivedData.push({

      elem:this.transferData[key].element});

    }
  }
}


<div class="panel-heading" id="dropHere" *ngFor="let x of receivedData" [innerHTML] = "x.elem">

Answer 1

更好的方法是：

让我们假设您的选项是从服务中动态提供的，并且您想要动态创建<option>元素。

描述功能的示例代码：

<select>
  <ng-container *ngFor="let option of options;">
    <option [value]="option['value']">{{option['label']}}</option>
  </ng-container>
</select>

如果组件中已有元素，则可以使用ElementRef访问它，如下所示：

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

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

  constructor(private el: ElementRef) {
    this.el = el;
  }

  ngAfterViewInit() {
    console.log('element', this.el.nativeElement);
    this.el.nativeElement.getElementById('dropHere');
  }
}

如果从组件类中操作DOM是不好的做法。

我希望这有帮助。

在AngularJS

1 个答案: