angular - Angular 2 中的简单 ngFor 错误

Question

我试图以 Angular 2 遍历数组中的每个对象。

这里是我的主要组成部分:

  selector: 'exploreGuide',
  templateUrl: 'exploreGuide.template.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./exploreGuide.style.scss']
})
export class exploreGuide {
  config: any;
  newAnnouncement: Announcement;
  deals: Deal[];
  events: venEvent[];
  announcements: Announcement[];


  constructor(config: AppConfig) {
    this.config = config.getConfig();

  }
  addAnnouncement(event: Event, announcement: Announcement) {
    event.preventDefault();
  this.announcements.push(announcement);
  }
}

这里我的对象定义:

export class Announcement{
  title: string;
  description: string;
}

这是实际的模板文件:

<section class = 'widget'>
  <h1 class="page-title" style="align-self: center;"> Announcements</h1>
  <div class="widget-controls">
    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
    <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
    <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
  </div>
  <div class = 'widget-body'>

          <input type="text" [(ngModel)]="newAnnouncement.title" name="title"  placeholder="Add Title...">
          <input type="text" [(ngModel)]="newAnnouncement.description" name="Description"  placeholder="Add Description...">
    <input type="button" (click)="addAnnouncement(newAnnouncement)">


    </div>
</section>
<br>
<ul>
  <li ngFor="let Announcement of announcements">
    {{Announcement.title}}
    {{Announcement.description}}

  </li>
</ul>

我是 Angular 的新手，主要来自 Java 背景，我很困惑我实际上是如何列出数组中的每个对象的。

Answer 1

你需要像这样初始化你的属性

announcements: Announcement[] = [];
newAnnouncement: Announcement = {};

此外，正如@Ryan 在他们对您的问题的评论中指出的那样，您的 ngFor 语法无效。它需要像这样以星号 (*) 开头

<li *ngFor="let announcement of announcements">
</li>

请注意，我按照惯例对变量名使用小驼峰式大小写，因此请确保所有大小写都以一种或另一种方式匹配。