Question

我正在使用angular2，我正在尝试从.style.width - 循环中加载的元素中获取*ngFor属性。我想用它来定义一些其他元素的宽度。这应该在页面加载时完成。我不希望将宽度存储为代码中的一些var。我想直接从dom那里得到它。

承诺：

let kistenPromise = new Promise(function(resolve, reject){

            let itemListContainer = document.getElementById("itemContainer");

                if(itemListContainer.children[0] != undefined){
                    resolve(itemListContainer.children);    
                }else{
                    reject(Error("Promise was not fullfilled!"));
                }
}.bind(this));

处理程序：

kistenPromise.then(
        function(result){
            console.log(result);
        }.bind(this), function(err){
            console.log(err);
        }.bind(this));

HTML：

<div class="itemFrame" id="itemContainer">
        <div class="listStyle" *ngFor="let item of list">{{item}}</div>
</div>

当我像这样使用colde时，它只返回Promise was not fullfilled。

但是，如果我尝试itemList.children != undefined并返回.length，则会返回0.我错过了什么？

提前致谢！

Answer 1

getElementById返回单个元素，因为id应该是唯一的，而不是数组。其他查询会返回和数组（例如getElementsByClassName或getElementsByTagName）。

Answer 2

你的处理程序写在哪里？它甚至可以在视图初始化之前执行。如果是，请尝试将其移至ngAfterViewInit

<强> your.component.ts

import { AfterViewInit } from '@angular/core'
export class YourComponent implements AfterViewInit {

    ngAfterViewInit() {
        kistenPromise.then(...)

    }
}

Answer 3

您可能想要使用AfterViewInit。将局部变量#itemContainer添加到容器中：

<div class="itemFrame" id="itemContainer" #itemContainer>
    <div class="listStyle" *ngFor="let item of list">{{item}}</div>
</div>

然后在您的组件中，您可以检查子元素（或将元素传递给另一个检查它的函数）：

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

export class YourComponent implements AfterViewInit {
  @ViewChild('itemContainer') itemContainer: ElementRef;

  ngAfterViewInit() {
      if (this.itemContainer.nativeElement.children.length) {
          // ...
      } else {
          // ...
      }
  }
}

在Angular2中承诺* ngFor

3 个答案: