代码之家 › 专栏 › 技术社区 › r3plica

使用标识符的angular6@viewchildren

angular

r3plica · 技术社区 · 6 年前

我创建了一个带有选定 PYB按钮组 使用 @ViewChildren ,声明如下:

@ViewChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>

我的HTML模板看起来有点像这样:

<div class="container" *ngIf="categories">
  <div class="row" pyb-button-group>
    <div class="col-md-4 col-6" *ngFor="let category of categories">
      <a class="btn-choice" [routerLink]="['/' + category.id]">
        <div class="header" #header>
          <span class="title">{{ category.name }}</span>
        </div>
      </a>
    </div>
  </div>
</div>

所以我有一个方法 ngAfterViewInit 这样地:

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

它又回来了 undefined …

我做错什么了吗?

2 回复 | 直到 6 年前

Lia 6 年前

应该是这样的:

@ContentChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>

ngAfterViewInit(){
 this.headers.toArray().forEach(el => {
      console.log(el);
  });
 }
}

DEMO

Sreekumar P 6 年前

它也适用于ViewChildren,

export class AppComponent {

  @ViewChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>
  categories: {
    name: string
  }[] = [];

  ngOnInit() {
    this.categories = [];
    this.categories.push({ name: "Test" }, { name: "Test2" });
  }

  ngAfterViewInit() {
    console.log(this.headers);
    this.headers.toArray().forEach(header => console.log(header));
  }
}

这是一个工作样品, https://stackblitz.com/edit/angular-jdkdro

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前