Блог

Я новичок в angular и пытаюсь создать проект чата для хобби в Angular 7 как часть моего обучения. Я действительно застрял в понимании модулей и компонентов, что привело меня к одной проблеме.

Проблема

У меня есть два компонента message-list и message-item , как показано в здесь руководстве. Я не хочу копировать все оттуда, а заинтересован только в понимании концепции списка сообщений и элемента.

Однако я написал некоторый код ниже, и список сообщений не работает.

модели /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 часа на чтение и только на чтение о том, как использовать модули и компоненты, но я даже не смог написать ни одной строки кода, потому что чувствовал себя настолько сбитым с толку, поэтому я пришел сюда, чтобы спросить это

Чего я хочу

Я был бы очень рад, если бы на этом этапе я мог настроить свое приложение для чата для отображения сообщений в этом стиле, как это описано в руководстве ссылка выше:

Я был бы рад, если кто-нибудь сможет указать мне правильное направление 🙂 спасибо.

Приветствия!

Не удается выполнить привязку к ‘messages’, поскольку это неизвестное свойство ‘message-list’

Но у компонента есть селектор <app-message-list> здесь:

 @Component({
  selector: 'app-message-list',
  ...
  

В руководстве все эти селекторы для компонентов не имеют app префиксов, но, когда компоненты были сгенерированы с помощью ng cli , к селекторам были добавлены префиксы по умолчанию ( app ). Попробуйте изменить его в своем шаблоне на:

 <app-message-list>
  

Или измените здесь в метаданных для компонента:

 @Component({
  selector: 'message-list',
  ...
  

@Input() private messages: Message[]; Должно быть public , а не private для доступа извне из вашего MessageListComponent .