Question

所以我正在开发一个通信应用程序，我希望将一组消息传递到twine-message组件的twine-messages组件中。以下是两个文件的实现。

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和Ionic 2支持解决方案，并且没有运气。有谁知道如何解决这个问题？谢谢！

Answer 1

您应该使用属性绑定

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

组件未从@Input（）接收值 - 离子2

1 个答案: