HTML 似乎试图在 Angular 中初始化变量之前渲染它

Question

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

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

我认为 HTML 试图在 l.image 变量通过来自本地 SQL?

的 GET 请求正确初始化之前渲染它

我的应用程序基本上使用 Angular 来查询节点 JS 服务器，其中 returns 一个 SQL 查询结果。提前谢谢你。

Angular代码

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()
  }

节点JS代码

app.get('/lists', async (req, resp) => {
    const conn = await pool.getConnection()
    try {
        const [ result, _ ] = await conn.query(SQL_SELECT_ALL_FROM_LISTS)

        resp.status(200)
        resp.type('application/json').send(result)
    } catch(e) {
        console.error('ERROR: ', e)
        resp.status(500)
        resp.end()
    } finally {
        conn.release()
    }
})

HTML

    <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>

Answer 1

你可以做两件事。不要从 constructor 调用 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>

Answer 2

您正在渲染 <li *ngFor = "let l of lists" >，但是 lists 在开始时未定义。

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

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

并从你的函数中删除 toPromise()

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

Answer 3

由于您正在使用 Angular，请考虑使用 Observable

在您的代码中，这可以更改为


export class ListsComponent implements OnInit {
  lists:any[] = []; // Create an empty list

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

  ngOnInit() {
    this.getImages.subscribe(lists => this.lists = lists)
  }

  getImages = () => this.http.get<any[]>('/lists')
  
}

注意变化；

已将 lists:any 更改为 lists:any[]，因为我们需要一个数组
将 getImages() 更改为 getImages = () => this.http.get<any[]>('/lists')。它的功能是 returns 和 Observable
我们不使用 async/await 而只是使用 subscribe

Answer 4

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

<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>

Answer 5

我的建议是，在您的 html 组件中添加一个 ngIf 指令，并在您从服务器收到响应后将其设为 true。

<div *ngIf="displayDetails">

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

</div>

在您的组件中，一旦您从服务器获得响应，使 make 显示详细信息为真。

 displayDetails:boolean = false;

     this.getImages.subscribe(lists => {
    this.lists = lists ;
      this.displayDetails = true;
    )}

HTML 似乎试图在 Angular 中初始化变量之前渲染它

HTML seems to be trying to render a variable before it's initialized in Angular

html

javascript

get

render

angular