Angular 4：使用* ng输出数据不起作用

Question

I'm working on this app with HttpClient, which gets data from a local json file containing images and description (the images are also local) I can log the data (in local array), but I'm having trouble outputing it in the view. This is the request:

  export class AppComponent {
  spaceScreens:Array<any>;

    constructor(private http:HttpClient) { 

      this.http.get('assets/data/data.json')

        .subscribe(data => {

        this.spaceScreens = data['results'];
          console.log(data);

        }, (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log('An error occurred:', err.error.message);
          } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
          }
        });
    } 

}

The JSON:

{
    "screenshots": [
        {
          "img": "assets/images/space1.jpg",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          "liked": "0"
        }, //etc

The HTML:

<mat-card *ngFor="let spaceScreen of spaceScreens; let i = index" >
            <img mat-card-image src="{{ spaceScreen.img }}">
            <mat-card-content>
              <p>{{ spaceScreen.description }}</p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-button>
                <i class="material-icons md-18" >favorite</i> LIKE
              </button>
              <button mat-button>
                <i class="material-icons md-18">delete</i> DELETE
              </button>
            </mat-card-actions>
          </mat-card> 

This is the log:

I guess the issue has to do with the map? But if I try to map the response I get the word underlined. Can someone give me a help? Thank you

Answer 1

change

<img mat-card-image src="{{ spaceScreen.img }}">

to

<img mat-card-image [src]="spaceScreen.img">

In angular 2+ you should prefer binding to attributes rather then setting them with string interpolation.

Answer 2

this.spaceScreens = data['results'];

should become

this.spaceScreens = data['screenshots'];

to match your json format.

Answer 3

尝试使用安全操作员？

<img mat-card-image [src]="spaceScreen?.img">