Question

我被困住了。我得到标题中的错误。在html中，它显示messageBundle对象，并且它具有完整的数据（因此没有丢失的数据）。数据是异步获取的，并且该部分正在运行，我可以获取正确的数据并可以显示它，但是我无法遍历它。据我所知，语法对于循环是正确的，因为它正在处理几乎相同的其他组件。 app.module具有BrowserModule，在子组件上我尝试添加CommonModule和BrowserModule两者没有区别。从所有人的角度来看，这应该可以，但是不能。我该如何解决？

component.html：

<div class = "contactList">
        <p>Contacts</p>
        <div >
            <div>{{messageBundle.contacts[0]}}</div>
            <li *ngFor="let contact of messageBundle.contacts">
                <span>{{contact.full_name}}</span>
            </li>
        </div>
    </div>

component.ts：

import {Component, OnInit, OnDestroy} from "@angular/core";
import { Subscription } from 'rxjs';
import { MessagingService } from '../message.service';
import { MessageBundle } from '../message-bundle.model';
import { BrowserModule } from '@angular/platform-browser';//does nothing

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent    {
  private messageBundleListener:Subscription;
  public messageBundle : MessageBundle;

  constructor(private messageService : MessagingService){}

  ngOnInit(){
    this.messageBundle  = this.messageService.getMessageBundle();
    this.messageService.fetch_entire_message_bundle_from_backend_server();
    console.log("updated budnle on component on start"+this.messageBundle);
    this.messageBundleListener = this.messageService.getMessageBundleUpdateListenerAsObservable().subscribe(
      (updatedMessageBundle)=>{
        this.messageBundle= updatedMessageBundle;//gets correct data, data is all there
        console.log("updated bundle on message component");
        console.dir(this.messageBundle)
      }
    );
  }
  ngOnDestroy(){
    this.messageBundleListener.unsubscribe();
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
...
import { MessageComponent } from './messages/message-window/message.component';

@NgModule({
  declarations: [
    AppComponent,
   ...
    MessageComponent
  ],
  imports: [
    BrowserModule,
    ...
  ],
  providers: [
      ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

没有语法错误。我花了一个小时，将ngFor更改为NgFor，这样它抛出了一个实际错误，将其更改回现在可以正常工作了。（╯°□°）╯︵┻━┻

无法绑定到“ ngForOf”，因为它不是“ li”的已知属性

1 个答案: