Javascript HTML似乎试图在变量之前呈现它'；它以角度初始化

应用程序工作正常，但控制台似乎在每次刷新时都显示此错误：

得到http://localhost:4200/[object%20Object]404（未找到） @lists.component.html:3（似乎参考了下面第三行html代码）

我估计HTML试图在通过本地SQL的GET请求正确初始化l.image变量之前呈现它

我的应用程序基本上使用Angular查询节点JS服务器，该服务器返回SQL查询结果。先谢谢你

角码

export class ListsComponent implements OnInit {

  lists:any

  constructor(private http: HttpClient, private router: Router, private cloud: Cloud, private sanitizer: DomSanitizer) {
    this.getImages()
   }

  ngOnInit() {
  }

  async getImages(){
    this.lists = await this.http.get<any>('/lists').toPromise()
  }

HTML

{{l.listName}
删除

你可以做两件事。不要从

构造函数调用
this.getImages（）
，而是从
ngOnInit
调用它，并将
li
包装在
ng content

 <ng-content *ngIf="list">
      <li  *ngFor="let l of lists"
        class="list-group-item d-flex justify-content-between align-items-center">
        <img *ngIf = "l.image !== 'undefined'" [src] = "l.image" class =
        "img-thumbnail img-fluid" width = "10%" > 
        <a (click) =
        "routeToTasks(l.listID, l.listName)" class = "list-group-item
        list-group-item-action list-group-item-primary"> {{l.listName}} </a> 
        <button type = "button" class = "btn btn-danger" (click) =
        "deleteList(l.listID)"> Delete </button> </li> </ng-content>
      </li>
</ng-content>



{{l.listName}
删除

你可以做两件事。不要从
构造函数调用
this.getImages（）
，而是从
ngOnInit
调用它，并将
li
包装在
ng content

 <ng-content *ngIf="list">
      <li  *ngFor="let l of lists"
        class="list-group-item d-flex justify-content-between align-items-center">
        <img *ngIf = "l.image !== 'undefined'" [src] = "l.image" class =
        "img-thumbnail img-fluid" width = "10%" > 
        <a (click) =
        "routeToTasks(l.listID, l.listName)" class = "list-group-item
        list-group-item-action list-group-item-primary"> {{l.listName}} </a> 
        <button type = "button" class = "btn btn-danger" (click) =
        "deleteList(l.listID)"> Delete </button> </li> </ng-content>
      </li>
</ng-content>



{{l.listName}
删除

您正在渲染
但是
列表在开始时未定义

我建议您指定
lists:any=[]
，这样就有了一个初始值并且不会呈现任何子对象，或者您可以使用
async
管道来处理等待动态数据的问题：

<li *ngFor = "let l of lists | async" >

您正在呈现
但是
列表在开始时未定义

我建议您指定
lists:any=[]
，这样就有了一个初始值并且不会呈现任何子对象，或者您可以使用
async
管道来处理等待动态数据的问题：

<li *ngFor = "let l of lists | async" >

因为你正在使用<代码>角<代码>考虑使用<代码>可观察的< /代码> 
在您的代码中，这可以更改为


导出类ListComponent实现OnInit{
列表：any[]=[]；//创建一个空列表
构造函数（私有http:HttpClient，私有路由器：路由器，私有云：云，私有sanitizer:DomSanitizer）{
}
恩戈尼尼特（）{
this.getImages.subscribe（lists=>this.lists=lists）
}
getImages=（）=>this.http.get（“/lists”）
}

注意这些变化

将
lists:any
更改为
lists:any[]
，与我们期望的数组相同


将
getImages（）
更改为
getImages=（）=>this.http.get（'/lists'）
。它是一个返回可观察的
函数


我们不使用
async/await
而是使用
subscribe


因为你正在使用<代码>角<代码>考虑使用<代码>可观察的< /代码> 
在您的代码中，这可以更改为


导出类ListComponent实现OnInit{
列表：any[]=[]；//创建一个空列表
构造函数（私有http:HttpClient，私有路由器：路由器，私有云：云，私有sanitizer:DomSanitizer）{
}
恩戈尼尼特（）{
this.getImages.subscribe（lists=>this.lists=lists）
}
getImages=（）=>this.http.get（“/lists”）
}

注意这些变化

将
lists:any
更改为
lists:any[]
，与我们期望的数组相同


将
getImages（）
更改为
getImages=（）=>this.http.get（'/lists'）
。它是一个返回可观察的
函数


我们不使用
async/await
而是使用
subscribe


在使用点运算符之前，请尝试使用问号，如下所示：

<li *ngFor = "let l of lists" class="list-group-item d-flex justify-content-between align-items-center">
    <img *ngIf = "l?.image !== 'undefined'" [src]="l?.image" class="img-thumbnail img-fluid" width="10%">
    <a (click) = "routeToTasks(l.listID, l.listName)" class="list-group-item list-group-item-action list-group-item-primary">{{l.listName}}</a>
    <button type="button" class="btn btn-danger" (click)="deleteList(l.listID)">Delete</button>    
</li>


{{l.listName}
删除

在使用点运算符之前尝试使用问号，如下所示：

<li *ngFor = "let l of lists" class="list-group-item d-flex justify-content-between align-items-center">
    <img *ngIf = "l?.image !== 'undefined'" [src]="l?.image" class="img-thumbnail img-fluid" width="10%">
    <a (click) = "routeToTasks(l.listID, l.listName)" class="list-group-item list-group-item-action list-group-item-primary">{{l.listName}}</a>
    <button type="button" class="btn btn-danger" (click)="deleteList(l.listID)">Delete</button>    
</li>


{{l.listName}
删除

我建议，在html组件中添加一个ngIf指令，并在从服务器返回响应后将该值设置为true

<div *ngIf="displayDetails">

<li *ngFor = "let l of lists" 
...

</div>


 

我的建议是，在html组件中添加一个ngIf指令，并在从服务器返回响应后将该值设置为true

<div *ngIf="displayDetails">

<li *ngFor = "let l of lists" 
...

</div>