时间戳

首页 > 解决方案 > *ngFor 不显示任何数据

asp.net - *ngFor 不显示任何数据

问题描述

我正在创建一个聊天应用程序。我有一个小问题，ngFor似乎对我不起作用。

我有 2 个组件，1 个是包含另一个组件的提要，即消息。所以 feed 显示了一个消息组件的列表。

饲料.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;
  }
}

消息 .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>

这也是我的服务，它从我的 asp.net 项目进行 API 调用。

消息服务 .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`);
  }
}

我尝试检查 API 调用的值，它具有基于控制台日志的值。

我的问题是它没有显示ngFor提要组件的任何数据。

标签： asp.netangular

解决方案

  1. 您缺少一组围绕属性值的引号。
  2. 您正在引用feed$模板中命名的变量，但组件中的字段名为feed。
  3. 您正在分配feedin ，这意味着如果您对其进行真实检查，ngInit它也会评估为。true因此，无需检查它的值，因为它总是会在true您的模板呈现后进行评估。

固定feed.component.html模板：

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

推荐阅读