如何选择* ngIf渲染的动态元素 [英] How can I select dynamic elements rendered by *ngIf

问题描述

正如下面提供的代码。我试图选择由ngIf生成的动态元素但是失败了。

As the code provided bellow. I tried to select a dynamic element generated by ngIf but failed.

我总共使用了两种方式。

I used two ways in total.

1. ElementRef和querySelector

组件模板：

    `<div class="test" *ngIf="expr">
      <a id="button">Value 1</a>
    </div>
    <div class="test" *ngIf="!expr">
      <a id="button">Value 2</a>
    </div>`

组件类：

    expr: boolean;

    constructor(
      private elementRef: ElementRef,
    ) {
    }

    ngOnInit(): void{
    //Call Ajax and set the value of this.expr based on the callback;
    //if expr == true, then show text Value 1; 
    //if expr == false, then show text Value 2;
    }
    ngAfterViewInit(): void{
      console.log(this.elementRef.nativeElement.querySelector('#button'));
    }

输出结果为 null 。

1. @ViewChild

组件模板：

    `<div class="test" *ngIf="expr">
      <a #button>Value 1</a>
    </div>
    <div class="test" *ngIf="!expr">
      <a #button>Value 2</a>
    </div>`

组件类：

    @ViewChild('button') button: elementRef;

    expr: boolean;

    ngOnInit(): void{
    //Call Ajax and set the value of this.expr based on the callback;
    //if expr == true, then show text Value 1; 
    //if expr == false, then show text Value 2;
    }

    ngAfterViewInit(): void{
      console.log(this.button);
    }

输出结果为 undefined ;

有没有办法让* ngIf生成动态dom？

Is there a way to get dynamic dom generated by *ngIf?

最后问题已经通过@ViewChildren解决了。

Finally the problem has been solved through @ViewChildren.

要记录更新的结果，必须使用单独的函数。

And to log the updated result, it is necessary to use a separate function.

例如：

错误的代码：

    @ViewChildren('button') buttons: ElementRef;

    function(): void{
      this.expr = true; // Change expression then the DOM will be changed;
      console.log(this.buttons.toArray()); // This is wrong because you will still get the old result;
    }

正确代码：

    @ViewChildren('button') buttons: ElementRef;

    function(): void{
      this.expr = true; // Change expression then the DOM will be changed;
    }
    ngAfterViewInit(): void{
      this.buttons.changes.subscribe( e => console.log(this.buttons.toArray()) ); // This is right and you will get the latest result;
    }

推荐答案

你无法得到 * ngIf =expr表达式为false时的元素，因为该元素不存在。

You can't get the element when the *ngIf="expr" expression is false because then the element doesn't exist.

仅当 ngAfterViewInit（）被调用时， ngOnInit（）中的值尚未设置。

The value is not yet set in ngOnInit(), only when ngAfterViewInit() is called.

Plunker示例

@Component({
  selector: 'my-app',
  template: `
    <div class="test" *ngIf="prop">
      <a #button id="button1">button1</a>
    </div>
    <div class="test" *ngIf="!boolean">
      <a id="button2">button2</a>
    </div>`
 ,
})
export class App {
  @ViewChild('button') button: ElementRef;

  prop:boolean = true;

  ngAfterViewInit() {
    console.log(this.button);
  }
}

使用 ViewChildren 的

@Component({
  selector: 'my-app',
  template: `
    <button (click)="prop = !prop">toggle</button>
    <div class="test" *ngIf="prop">
      <a #button id="button1">button1</a>
    </div>
    <div class="test" *ngIf="!boolean">
      <a #button id="button2">button2</a>
    </div>`
 ,
})
export class App {
  @ViewChildren('button') button: QueryList<ElementRef>;

  prop:boolean = true;

  ngAfterViewInit() {
    console.log(this.button.toArray());
    this.button.changes.subscribe(val => {
      console.log(this.button.toArray());
    });

  }
}

这篇关于如何选择* ngIf渲染的动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！