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

Question

应用程序运行良好，但控制台似乎每次刷新时都会显示此错误：

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

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

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

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

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

由于使用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')

}

注意变化；

1. 将lists:any更改为lists:any[]，因为我们期望阵列

2. 将CCD_ 15改变为CCD_。它是一个返回Observable的函数

3. 我们不使用async/await，而是简单地使用subscribe

Answer 5

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

<div *ngIf="displayDetails">
<li *ngFor = "let l of lists" 
...
</div>

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

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