@Input()에서 값을받지 못하는 구성 요소 - 이오닉 2

Question

통신 앱을 만들고 있는데 메시지 모음을 twine-messages 구성 요소의 twine-message 구성 요소로 전달하고 싶습니다. 다음은 두 파일의 구현입니다.

twine-messages

:

import { Component, ViewChild } from '@angular/core'; 
import { Content } from 'ionic-angular'; 

@Component({ 
     selector: 'twine-messages', 
     template: ` 
      <ion-content> 
        <twine-message *ngFor="let message of messages;" 
         name="{{message.name}}" 
         user="{{message.user}}" 
         type="{{message.type}}" 
         messages="{{message.messages}}" 
         time="{{message.time}}"> 
        </twine-message> 
      </ion-content> 
     ` 
}) 

export class MessagesComponent { 
     messages: any = [ 
      { 
        name: "Peter Parker", 
        user: "user5", 
        type: "twiner", 
        messages: [ 
         "Hey guys! You both get 3 hours of sleep so I thought you might like each other's company!" 
        ], 
        time: "3:00pm" 
      }, 
      { 
        name: "", 
        user: "user2", 
        type: "time", 
        messages: [], 
        time: "7:15pm" 
      }, 
      { 
        name: "Vikki", 
        user: "user6", 
        type: "twinee", 
        messages: [ 
         "Hi! How are ya?" 
        ], 
        time: "7:15pm" 
      }, 
      { 
        name: "You", 
        user: "user2", 
        type: "user", 
        messages: [ 
         "I'm great! So, how'd you meet Peter?" 
        ], 
        time: "7:16pm" 
      } 
     ]; 
     @ViewChild('searchbar') searchBar; 

     ionViewDidLoad() { 
      this.searchBar.setFocus(); 
     } 
} 

twine-message :

import { Component, Input } from '@angular/core'; 
import { Content } from 'ionic-angular'; 

@Component({ 
     selector: 'twine-message', 
     template: ` 
      <div class="center"> 
        <img src="templates/{{user}}.png" alt="{{name}}"/> 
        <h3>{{name}}</h3> 
        <ion-card *ngFor="let message of messages"> 
         <ion-grid> 
           <p>{{message}}</p> 
         </ion-grid> 
        </ion-card> 
      </div> 
     ` 
}) 

export class MessageComponent { 
     @Input() public name: string; 
     @Input() public user: string; 
     @Input() public time: string; 
     @Input() public type: string; 
     @Input() public messages: any; 
} 

내 문제는이 코드의 @Input를 실행할 때() 값이 정의되지 않은 점이다. 예를 들어 user 변수 (GET http://localhost:8100/templates/.png 404 (Not Found))를 사용하여 이미지를로드하려고하면이 오류가 발생합니다. 모든 StackOverflow, GitHub, Ion 2 Support 솔루션을 샅샅이 뒤졌고 운이 없었습니다. 누구든지이 문제를 해결하는 방법을 알고 있습니까? 고맙습니다!

Answer 1

각 사용자의 HTML 템플릿에서 괄호에 있어야 속성 바인딩

<twine-message *ngFor="let message of messages;" 
         [name]="message.name" 
         [user=]"message.user" 
         [type]="message.type" 
         [messages]="message.messages" 
         [time]="message.time"> 
</twine-message>