角度4：* ngForでデータを出力していません

Question

私は画像と説明（画像もローカルです）を含むローカルjsonファイルからデータを取得するHttpClientでこのアプリケーションを開発しています。配列）、私はビューでそれを出力するのに問題があります。これは、要求です：

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}`); 
      } 
     }); 
    } 

} 

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 

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> 

これはログです：

私は問題を推測しますやらなければならない地図と一緒に？しかし、私が応答をマッピングしようとすると、単語に下線が引かれます。誰かが私に助けを与えることができますか？あなたは、文字列の補間でそれらを設定することではなく、その後の属性への結合を好むはずです2+あなたは

Answer 1

this.spaceScreens = data['results']; 

は、あなたのJSON形式に一致するように

this.spaceScreens = data['screenshots']; 

になるはずです。

Answer 2

変更

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

角度で

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

にありがとうございます。

Answer 3

セーフティオペレータを使用しようとしていますか？

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