Angular 角度2误差的简单计算方法

我试图在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>

公告




{{公告.标题}
{{Announcement.description}}

---

我是angular的新手，主要来自java背景，对于如何让它列出数组中的每个对象，我感到困惑。

您需要像这样初始化属性

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

此外，@Ryan在对您的问题的评论中指出，您的

ngFor

语法无效。它需要像这样以星号（*）开头

---

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

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

使用

*ngIf

作为*ngFor的父级，检查对象/数组是否具有要迭代的属性，并且使用*ngIf angular将不允许将控制传递给*ngFor，直到数组不为空。正如@yoav在最近的回答中所使用的，所以您可以将其用作

<ul *ngIf="announcements !== null">
// or can use like this
//<ul *ngIf="announcements.length > 0">
    <li *ngFor="let Announcement of announcements">
.....
</li>
</ul>

---

PS：确保您的语法适用于*ngFor。正如我在回答中提供的那样。

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

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

除了您错过*的*ngFor。

---

angular2规定，所有结构指令都以

*

作为前缀，以区别于自定义指令。

错误是什么意思？请确保在问题中包含错误消息。无论如何，请尝试

*ngFor=“…”

。您只需更改

公告：公告[]至
公告：公告[]=[]。是的，“赖安是对的，你需要<代码> *ngOp=……”<代码>对不起，我的意思是，当我在Chrome中检查时，它告诉我“不能读取属性”标题“未定义”。@ Rayand和ALAN HADAD是正确的，确保数组对象被初始化，并在使用数据之前考虑使用<代码> *NGIF =“通知”< /C> >。我们可以推断，如果列表为空，他希望能够建立该列表。您没有提供解决方案，只是提供了一个保护，可以防止组件做任何事情。解决这个问题的初始化显然是微不足道的。这个答案在很大程度上看起来不错，但是公告分配是错误的。将对象指定给数组字段。请将其固定到
公告：公告[]=[]，然后我就可以投票了对不起，错了。抢手货除了在构造函数初始化中使用之外，这与我的答案相同。这比内联初始化它们更好吗？另外，
this.newAnnouncement:Announcement={}无效语法。
在angular2中，所有结构指令都必须以*作为前缀，以区别于自定义指令。
但您可以编写自定义结构指令。。。。
<ul>
 <li *ngFor="let Announcement of announcements">
  {{Announcement?.title}}
  {{Announcement?.description}}
 </li>
</ul>

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