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

时间:2019-02-02 11:21:40

标签: angular

我在显示来自在线api上的json的图像时遇到问题。 对我不好的棱角技巧表示抱歉,我是2周前才开始的。 我正在尝试从json文件中的“数据”对象访问“ image1”属性。

我尝试使用阅读器从url读取,并且效果很好,但是从api检索-特别是json的对象“ data”和属性“ image1”似乎是一个问题。也许问题是我的方法是错误的,仅将src设置为“数据”对象,我需要将其设置为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"
    }
  }
]

我的界面Car

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

3 个答案:

答案 0 :(得分:0)

将这样的图像绑定到您的* ngFor

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

,然后在您的界面中将“数据”类型设置为任意

答案 1 :(得分:0)

正如Ved_Code_it所说,对i.data.image1的bindind [src]有效:

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

说明

通过[src],我们可以看到:

  • html标签 image 具有名为 src 的属性。
  • 由方括号 [] 包裹:这是Angular的一种单向绑定。意思就是 每当分配给[src]的值更改时,img元素的src属性也会更改。 (如果您通过javascript更改了i.data.image1的值,则您的图像将会更改)

在这里,我给新的角度编程器留下一些建议:

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

答案 2 :(得分:0)

app.component.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'
},