Question

我已经在ts文件中声明了一个属性，如下所示，并如图所示在我的ngOnInit（）中启动了该属性，当我执行该属性的控制台日志或尝试从该模板读取该属性时，它说未定义{{3 }}

.ts文件：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
   selector: 'app-main-home',
   templateUrl: './main-home.component.html',
   styleUrls: ['./main-home.component.css']
   })
export class MainHomeComponent implements OnInit {

   serviceList:product[] = [];
   tcsDbComponents:TcsDbComponent[];


constructor(private dataService:DataService, private 
   route:ActivatedRoute) { }

ngOnInit() {    
  console.log("this.serviceList")

    this.dataService.getServiceList().subscribe((data) => {
    this.serviceList = data; 

   });
}

}

interface product{
  id:number;
  component:String; 
}

模板：

<p>
main-home works!
</p>
<div class="test" ng-if={{flag}}>{{serviceList}}</div>
<div class="service-cards" *ngFor="let service of serviceList "
[routerLink]="['/', componentDetail.component]">
{{serviceList}}

<div class="card">
  <h1>{{service?.id}}</h1>

<h1>{{service?.component}}</h1>
<h1>{{service?.id}}</h1>

</div>
</div>

enter image description here

Answer 1

您需要将 console.log 放在 subscribe 内，还将serviceList初始化为一个空数组

serviceList : produce[] = [];

如果您正在ngFor模板中使用以上变量，请确保使用安全的导航运算符，因为您正在等待异步请求的响应。

<h1> {{service?.component}}</h1>

ng如果应与布尔值一起使用，请不要使用批注

<div class="test" *ngIf=flag>{{serviceList | json }}</div>

即使在Oninit中绑定后，角度属性也未定义

1 个答案: