Question

我正试图以角度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>

我是角色的新手，大多来自java背景，我很困惑我实际上是如何列出数组中的每个对象。

Answer 1

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

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

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

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

请注意，我按惯例使用较低的驼峰大小写变量名称，因此请确保所有大小写都符合这种或那种方式。

Answer 2

是的，有两种可能的答案可以防止错误消息。

使用*ngIf作为* ngFor的父级来检查obeject / array是否具有要进行迭代的属性，并且使用* ngIf angular将不允许将控制传递给* ng对于直到数组不为空。正如@yoav在最近的回答中所使用的，所以你可以使用它作为。
```
<ul *ngIf="announcements !== null">
// or can use like this
//<ul *ngIf="announcements.length > 0">
    <li *ngFor="let Announcement of announcements">
.....
</li>
</ul>
```
而不是使用* ngIf更好地在Elevis Operator(?.)本身中使用*ngFor，如果数组/对象迭代中不存在属性，则不允许抛出错误，请像这样使用它
```
<ul>
 <li *ngFor="let Announcement of announcements">
  {{Announcement?.title}}
  {{Announcement?.description}}
 </li>
</ul>
```

PS：确保您的语法适合* ngFor。就像我在答案中提供的那样。

Answer 3

或者，您可以在构造函数中启动变量，这是最佳实践，建议如下

constructor(config: AppConfig) {
     this.announcements = [];
     this.newAnnouncement = {};
     this.config = config.getConfig();
 }

除了错过*的 * ngFor 之外。在angular2中强制要求所有结构指令都以*作为前缀，以区别于自定义指令。

简单的ngFor Angular 2中的错误

3 个答案: