Question

标题：角度8-在角度材质的网格中显示图像。

我正在尝试在Angular材质的网格中显示通过Web ap从SQL Server检索到的图像。

表中的图像存储为： varbinary NOT NULL

从表中检索行，但在显示时失败。

我遇到错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

我是否必须进行某种转换或使图像显示在网格中？

我的SQL Server表定义：

 CREATE TABLE [dbo].[tblImages]
 (  
    [ImageId]        [int] IDENTITY(1,1) NOT NULL,
    [ImageData]      [varbinary](max) NOT NULL
  CONSTRAINT [PK_Image] PRIMARY KEY CLUSTERED   
 (  
  [ImageId] ASC  
 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, 
 ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
 ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

我的html是：

<!-- A list of images in a 3-column grid. -->
<div>
    <mat-grid-list cols="3" rowHeight="2:1">
        <mat-grid-tile *ngFor='let i of allImages'>
            <img [src]='i' class="tile-image">
        </mat-grid-tile>
    </mat-grid-list>
</div>

我的Angular图片模型是：

 import { Binary } from '../../node_modules/@angular/compiler';

 export class Image {
    ImageData: Binary[];
 }

我的Angular组件是-我只是显示html中使用的数组。其余代码未显示：

allImages: Observable<Image[]>;

Answer 1

该错误是由于ngFor循环尝试对可观察对象进行迭代而造成的。异步管道可能有用：

<!-- A list of images in a 3-column grid. -->
<div>
    <mat-grid-list cols="3" rowHeight="2:1">
        <mat-grid-tile *ngFor='let i of allImages | async'>
            <img src='data:image/jpeg;base64,{{ i.ImageData }}' class="tile-image">
        </mat-grid-tile>
    </mat-grid-list>
</div>

角度8-在角度材质的网格中显示图像

1 个答案: