* ngДля показа каких-либо данных

Question

Я создаю приложение для чата.У меня небольшая проблема, ngFor, похоже, не работает для меня.

У меня есть 2 компонента, 1 - это фид, который содержит другой компонент, который является сообщением.Итак, фид показывает список компонентов сообщения.

Фид .ts

import { Component, OnInit, OnChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { Message } from '../models/message';
import { MessageService } from '../core/message.service';

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

  feed: Observable<Message[]>;

  constructor(private msgService: MessageService) { }

  getMessages(): Observable<Message[]> {
    return this.msgService.getAllMessages();
  }

  ngOnInit() {
    this.feed = this.getMessages();
  }

  ngOnChanges() {
    this.feed = this.getMessages();
  }
}

Фид .html

<div class="feed">
  <div *ngIf="feed | async; then fetched else fetching">
  </div>

  <ng-template #fetched>
    <div *ngFor="let message of feed$ | async" class="message">
      <app-message [message]=message></app-message>
    </div>
  </ng-template>

  <ng-template #fetching>
    <h3>Loading...</h3>
  </ng-template>
</div>

Сообщение .ts

import { Component, OnInit, Input } from '@angular/core';

import { Message } from '../models/message';

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

  @Input() message: Message;
  sender: string;
  body: string;
  createdAt: string;

  constructor() { }

  ngOnInit(message = this.message) {
    this.sender = message.Sender;
    this.body = message.Body;
    this.createdAt = message.CreatedAt;
  }
}

Message .html

<div class="messageContainer">
  <div class="messageData">
    <span class="sender">
      <p>{{sender}}</p>
    </span>
    <span class="createdAt">
      <p>{{createdAt | date:'medium'}}</p>
    </span>
  </div>
  <div class="messageContent">
    {{body}}
  </div>
</div>

Также вот мой сервис, который выполняет вызов API из моего проекта asp.net.

MessageService .ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

import { Message } from '../models/message';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  private readonly baseUrl = 'http://localhost:50169';

  constructor(private http: HttpClient) { }

  getAllMessages(): Observable<Message[]> {
    return this.http.get<Message[]>(`${this.baseUrl}/api/messages`);
  }
}

I 'мы попытались проверить значение вызова API, и оно имеет значение на основе журнала консоли.

Моя проблема заключается в том, что он не показывает никаких данных о ngFor компонента канала.

Answer 1

1. Вам не хватает набора кавычек вокруг значения атрибута.
2. Вы ссылаетесь на переменную с именем feed$ в своем шаблоне, но поле в вашем компоненте называется feed.
3. вы присваиваете feed в ngInit, это означает, что оно также оценивается как true, если вы выполните правдивую проверку.Таким образом, нет необходимости проверять его значение, так как оно всегда будет равно true после рендеринга шаблона.

Исправлено feed.component.html template:

<div class="feed">
  <div *ngFor="let message of feed | async" class="message">
    <app-message [message]="message"></app-message>
  </div>
</div>