angular使用NG-ZORRO穿梭框出现无法渲染视图的问题

最新推荐文章于 2022-05-27 13:33:44 发布

一笑生花L

最新推荐文章于 2022-05-27 13:33:44 发布

阅读量651

点赞数 1

分类专栏：前端文章标签：前端 angular typescript

本文链接：https://blog.csdn.net/weixin_46670092/article/details/117652886

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在使用Angular框架和NG-ZORRO库的穿梭框组件时遇到的视图无法渲染的问题。问题出在将后端返回的数据直接赋值给穿梭框的 dataSource 属性。解决方法是在订阅服务的回调中先将数据存储到局部变量，然后再赋值给 dataSource，确保数据正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular使用NG-ZORRO穿梭框出现无法渲染视图的问题

HTML

    <nz-transfer
      [nzDataSource]="list"
      nzShowSearch
      [nzFilterOption]="filterOption"
      (nzSearchChange)="search($event)"
      (nzSelectChange)="select($event)"
      (nzChange)="change($event)">
    </nz-transfer>

TS

	getData(): void {
		list: any[] = [];
	    this.service.postRequest('data/findList').subscribe((res: any) => {
	      for (let i = 0; i < res.data.length; i++) {
	        this.list.push({
	          key        : res.data[i].id,
	          title      : res.data[i].name,
	          description: res.data[i].value,
	          direction  :  res.data[i].type
	        });
	      }
	    }, err => {
	    });
	}

问题

视图无法渲染
在这里插入图片描述

解决方法

在请求结果代码块中定义一个变量data接收for循环取得的数据再赋值给list

	getData(): void {
		list: any[] = [];
	    this.service.postRequest('data/findList').subscribe((res: any) => {
	      let data = [];
	      for (let i = 0; i < res.data.length; i++) {
	        data.push({
	          key        : res.data[i].id,
	          title      : res.data[i].name,
	          description: res.data[i].value,
	          direction  :  res.data[i].type
	        });
	      }
	      this.list = data;
	    }, err => {
	    });
	}