时间戳

首页 > 解决方案 > 我无法访问我使用 ngFor 循环创建的 DOM 元素，并且我正在从服务中获取数据。角

javascript - 我无法访问我使用 ngFor 循环创建的 DOM 元素，并且我正在从服务中获取数据。角

问题描述

我正面临一个与 DOM Manipulation 相关的问题。我在我的组件中定义了一个名为颜色的数组，然后我调用服务方法并从服务器获取颜色数据，然后将它们分配到订阅方法中的颜色数组中。在使用 *ngFor 循环的 HTML 模板中，我正在显示颜色数组数据。现在我想为 HTML 元素添加一些动态类或样式，为此，我使用 ElementRef 来访问此元素，但我无法访问它，因为颜色数组最初是未定义的。现在让我附上代码...

@Component({
  selector: 'app',
  template: "<div><li class="color" *ngFor="let color of colors">{{color}}</li></div>",
  styleUrls: ['./app.component.css'] 
})

export class AppComponent implements OnInit, AfterViewInit {
   colors:any;

   constructor(private elementRef:ElementRef, private renderer:Renderer2) {}
   
   ngOnInit():void {
     setTimeout(() => {
        this.colors = ['red', 'yellow', 'green'];
     }, 1000);
   }

   ngAfterViewInit():void {
     const color = this.elementRef.nativeElement.querySelectorAll('.color');
     console.log(color);
   }
}

在这里，我在此代码中使用 setTimeout 函数，它的行为类似于服务，因为该服务需要一些时间从服务器获取数据，但在我的代码中，我使用的是服务。

现在，如果我在开发人员工具中打开控制台，那么我会得到 NodeList []，这意味着我无法访问 DOM 元素。我知道我无法访问 DOM 元素的问题，因为我用于访问 DOM 元素的代码在分配给颜色数组的数据之前运行，并且默认情况下或最初颜色数组未定义或为空。这就是我在控制台中获取 NodeList [] 的原因。但我无法理解如何解决这个问题？

提前致谢。

标签： javascriptarraysangulardomservice

解决方案

你需要ngAfterViewCHecked. 这将在每次 Angular 完成对组件及其子组件的更改检测运行时运行

其次，存在错误template。如果您使用"将终止字符串的所有双引号。您不需要对这样的所有属性使用单引号和双引号

'<div><li class="color" *ngFor="let color of colors">{{color}}</li></div>'

演示

推荐阅读