Angular - 从 json 对象获取属性并将其显示为图像答案

【问题标题】：Angular - Getting property from json object and displaying it as imageAngular - 从 json 对象获取属性并将其显示为图像
【发布时间】：2020-12-25 23:50:47
【问题描述】：

我在显示来自在线 api 的 json 图像时遇到问题。对不起，我的角度技能很差，我两周前才开始。我正在尝试从 json 文件中的“数据”对象访问“image1”属性。

我尝试使用阅读器从 url 读取并且效果很好，但是从 api 检索 - 特别是 json 的对象“data”和属性“image1”似乎是一个问题。也许问题是我的方法只是将 src 设置为“data”对象是错误的，我需要将其设置为 data[“image1”]，我尝试设置为 [src]="data["image1"] 但没有成功。

我的 JSON

[
  {
    "id": 1,
    "type": "car",
    "name": "Porsche 911",
    "description": "driving machine",
    "area_id": null,
    "data": {
      "name": "JSON Name",
      "description": "JSON Description",
      "image1": "https://unsplash.com/photos/u6BPMXgURuI"
    }
  }
]

我的界面汽车

export interface Car {
  id: string;
  type: string;
  name: string;
  description: string;
  area_id: string;
  data: string;
}

我的组件html

<tr *ngFor="let i of cars | async">
        <td>{{i.id | json}}</td>
        <td>{{i.type | json}}</td>
        <td>{{i.name | json}}</td>
        <td>{{i.description | json}}</td>
        <td>{{i.area_id | json}}</td>
        <td><img [src]="i.data | json" alt="image"></td>
      </tr>

我的组件 ts 文件

export class CarComponent implements OnInit {

  cars: Observable<Car[]>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.cars = this.http.get<Car[]>('https://car-garage-             
beta.herokuapp.com/api/cars/porsche');
  }
}

在我的界面中，如果我将“数据”类型设置为字符串或对象，我会得到相同的错误

net::ERR_UNKNOWN_URL_SCHEME

【问题讨论】：

在我的界面中，如果我将“数据”类型设置为字符串或对象，我会得到同样的错误很难相信如果你将该属性设置为对象或事件更好，你的 JSON 的特定属性，你会得到那个网络错误。
我认为那是因为我刚刚检索到“i.data | json”而不是“i.data.image1”

标签： angular

【解决方案1】：

在你的 *ngFor 中绑定这样的图像

<td><img [src]="i.data.image1" alt="image"></td>

并在您的界面中将“数据”类型设置为任何

【讨论】：

【解决方案2】：

正如 Ved_Code_it 所说，绑定 [src] 到 i.data.image1 有效：

<td><img [src]="i.data.image1"></td>

说明

通过[src]我们可以看到：

html 标签 image 有一个名为 src 的属性。
它被括号 [ ] 包裹：这是 Angular 单向绑定。意思就是每当分配给 [src] 的值发生变化时，img 元素的 src 属性也会发生变化。（如果您从 javascript 中更改 i.data.image1 的值，您的图像将会更改）

在这里我给一个新的 Angular 程序员一些建议：

在您的界面 Car 中，您定义了 data: string;，但您真正期望的是一个对象，因此您应该将其更改为 "data": { "name": string, "description": string, "image1": string }。这是 typescript 类型定义，有助于程序员不犯错误，但最终，当它转译为 javascript 时，此代码会消失。
检查属性 data 是否存在以及是否具有 image1 会很方便。

【讨论】：

【解决方案3】：

app.compoenent.html

<div *ngIf="item.icon" class="img">
    <img [src]="item.icon">
</div>

我的 JSON：

{
    id: 'App',
    title: 'App',
    type: 'item',
    icon: '.assets/img/sidebar/app.svg'
},

【讨论】：