Angular 在typeScript中将DIV元素作为自动完成容器的子元素追加

我必须将DIV元素附加为autocomplete容器的子元素，因为我已经为该容器创建了一个c DIV元素，该元素将包含项（值）

我尝试了下面给出的代码，但这更像是javaScript，所以我不知道如何在TypeScript中实现DOM

a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");


this.parentNode.appendChild(a);

---

使用

渲染器2

：

@组件({
选择器：“你好”，
模板：``，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
@ViewChild（“容器”）容器：ElementRef；
建造师(
私人R:Render2
) {}
恩戈尼尼特（）{
这个.appendElement（）；
}
appendElement（）{
const el=this.R.createElement（'a'）；
这个.R.setAttribute（el，'id'，'autocomplete list'）；
this.R.setAttribute（el，'class'，'autocomplete items'）；
const txt=this.R.createText（“这是一个链接”）；
this.R.appendChild（el，txt）；
this.R.appendChild（this.container.nativeElement，el）；
}
}

@Component({
  selector: 'hello',
  template: `<div #container></div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  @ViewChild('container') container: ElementRef<HTMLDivElement>;

  constructor(
    private R: Renderer2
  ) {}

  ngOnInit() {
    this.appendElement();
  }

  appendElement() {
    const el = this.R.createElement('a');
    this.R.setAttribute(el, 'id', 'autocomplete-list');
    this.R.setAttribute(el, 'class', 'autocomplete-items');
    const txt = this.R.createText('This is a link');
    this.R.appendChild(el, txt);

    this.R.appendChild(this.container.nativeElement, el);
  }
}