角度7：无法绑定到“消息”，因为它不是“消息列表”的已知属性

Question

我是不熟悉Angle的人，因此尝试在Angular 7中建立一个业余聊天项目，这是我学习的一部分。我真的很想了解模块和组件，这使我陷入了一个问题。

问题

我有两个组件message-list和message-item，如教程here所示。我不想从那里复制所有内容，而只是想了解消息列表和项目的概念。

但是我在下面写了一些代码，消息列表不起作用。

models / message.ts

export class Message {

    avatar: string;
    content: string;
    timestamp: string;

    constructor( avatar: string, content: string, timestamp: string ){

        this.avatar = avatar;
        this.content = content;
        this.timestamp = timestamp;

    }
}

message-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Message } from '../models/message';

@Component({
  selector: 'app-message-list',
  templateUrl: './message-list.component.html',
  styleUrls: ['./message-list.component.css']
})
export class MessageListComponent implements OnInit {

  @Input('messages')
  private messages : Message[];

  constructor() { }

  ngOnInit() {
  }

}

message-list.component.html

<div class="chatlist">
  <ul class="list-group">
    <message-item *ngFor="let msg of messages" [message]="msg"></message-item>
  </ul>
</div>

message-item.component.html

<li class="list-group-item">
  <img [src]="message.avatar" class="avatar"/>
  <div class="message">
    {{message.content}}
  </div>
  <div class="timeform">
    <i class="fa fa-clock-o" aria-hidden="true"></i> <span class="timestamp">at {{message.timestamp | date : 'dd/MM/yyyy' }}</span>
  </div>
</li>

message-item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Message } from '../models/message';

@Component({
  selector: 'app-message-item',
  templateUrl: './message-item.component.html',
  styleUrls: ['./message-item.component.css']
})
export class MessageItemComponent implements OnInit {

  @Input('message')
  private message: Message;

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChatWindowComponent } from './chat-window/chat-window.component';
import { MessageListComponent } from './message-list/message-list.component';
import { MessageItemComponent } from './message-item/message-item.component';

@NgModule({
  declarations: [
    AppComponent,
    ChatWindowComponent,
    MessageListComponent,
    MessageItemComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是当我在chrome中运行此程序时，我得到了：

我尝试过的事情

花了2个小时的阅读时间，只阅读了有关如何使用模块和组件的信息，但是由于感到困惑，我什至无法编写一行代码，因此我来这里问这个问题

我想要的

如果现在我可以使我的聊天应用以这种风格显示消息，如上面的教程链接中所述，我将感到非常高兴：

如果有人能指出正确的方向，我会很高兴的：）谢谢。

干杯！

Answer 1

  

无法绑定到“消息”，因为它不是“消息列表”的已知属性

但是组件在此处具有选择器QAction：

<clr-datagrid (clrDgRefresh)="fetchData($event)"></clr-datagrid>

fetchData(state) {
  // Fetch data from back end
}

在教程中，所有这些组件选择器都没有<app-message-list>前缀，但是，当组件由@Component({ selector: 'app-message-list', ... 生成时，默认前缀（app）被添加到选择器中。尝试将其在模板中更改为：

ng cli

或在此处更改组件的元数据：

app

Answer 2

@Input() private messages: Message[];必须是public而不是private，才能从您的MessageListComponent外部访问。