typescript 提取本地数据时显示加载微调器

owfi6suc 于 2023-01-27 发布在 TypeScript

关注(0)|答案(1)|浏览(149)

我很难理解以下内容：
我有一个Image对象：

export class Image {
  id: string;
  imageName: string;
  imageDesc: string;
  base64?: string;  // optional for future converting
}

然后定义一个对象数组：

export const mockImages: Image[] = [
  {
    id: 'image1',
    imageName: 'image1.jpg',
    imageDesc: 'Description of the first picture.',
  },
  {
    id: 'image2',
    imageName: 'image2.jpg',
    imageDesc: 'Description of the second picture.',
  },
  {
    id: 'image3',
    imageName: 'image3.jpg',
    imageDesc: 'Description of the third picture.',
  }
]

在ts文件中，我加载数据并开始转换

ngOnInit(): void {
    this.imageData = mockImages;
    this.myService.convertImg();
  }

在我的html中，我循环遍历这些数据，虽然他们没有指定第四个参数base64，但我想有条件地显示正在加载的微调器而不是图像：

<div *ngFor="let data of imageData; let i = index">
  <div [hidden]="!data[i]?.base64">
     <img
        (click)="onPreviewImage(i)"
        [src]="data.base64"
        [alt]="data.imageDesc"
     />
   </div>
   <app-loading-tab [hidden]="data[i]?.base64"></app-loading-tab>
</div>

我还定义了mockImages和mockImagesPath属性。

convertImg(): void {
    const numberOfFiles = this.mockImages.length;
    for (let i = 0; i < numberOfFiles; i++) {
      this.http
        .get(`${this.mockImagesPath}/${this.mockImages[i].imageName}`, {responseType: 'blob'})
        .subscribe((res) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            this.mockImages[i].base64 = reader.result as string;
          };
          reader.readAsDataURL(res);
        });
    }
  }

但是这种方法并没有达到我的期望--即在数据正在加载/并且已经显示时有条件地显示和隐藏加载器。我总是看到加载微调器，就好像转换没有被识别一样。
你能告诉我我做错了什么吗？

typescript

来源：https://stackoverflow.com/questions/75238607/showing-loading-spinner-while-fetching-the-local-data

1条答案

按热度按时间

z31licg01#

我的建议是在您的服务类上创建一个Subject，类似于

public imageConverted = new Subject<Image>();

然后在convert方法中，每当图像完成转换时通知：

convertImg(): void {
    const numberOfFiles = this.mockImages.length;
    for (let i = 0; i < numberOfFiles; i++) {
      this.http
        .get(`${this.mockImagesPath}/${this.mockImages[i].imageName}`, {responseType: 'blob'})
        .subscribe((res) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            this.mockImages[i].base64 = reader.result as string;
            this.imageConverted.next(this.mockImages[i]);
          };
          reader.readAsDataURL(res);
          
        });
    }
  }

最后，在组件中订阅事件并更新完成转换的图像：

ngOnInit(): void {
    this.imageData = mockImages;
    this.myService.imageConverted.subscribe({
        next: (image) => {
            const index = this.imageData.findIndex(i => i.id === image.id);
            if (index > -1) {
               this.imageData[index] = image;
            }
        }
    });
    this.myService.convertImg();
  }

赞(0）回复(0）举报 2023-01-27

我来回答

typescript 提取本地数据时显示加载微调器

1条答案

相关问题

热门标签

最新问答