Komponente empfängt keine Werte von @Input() - Ionic 2

Question

So arbeite ich an einer Kommunikationsanwendung, und ich möchte eine Sammlung von Nachrichten in die twine-message Komponente von der twine-messages Komponente übergeben werden. Im Folgenden finden Sie die Implementierungen beider Dateien.

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

Mein Problem ist, dass, wenn ich diesen Code ausführen, die @Input() Werte nicht definiert sind. Zum Beispiel erhalte ich diesen Fehler, wenn ich versuche, ein Bild unter Verwendung der user Variablen zu laden: GET http://localhost:8100/templates/.png 404 (Not Found). Ich habe jede einzelne StackOverflow-, GitHub- und Ionic 2-Support-Lösung durchforstet und hatte kein Glück. Hat jemand eine Idee, wie man dieses Problem lösen kann? Vielen Dank!

Answer 1

sollten Sie Eigenschaft Bindungen verwenden

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