Question

我使用* ngFor迭代数组以便在列表中显示它们，但我无法在列表中添加新项目。在Onclick活动期间，我得到一个空的李。可能我没有链接正确的东西？指令？或者是什么？也许我使用了错误的变量？

我的导出类，我有我的构造函数：

export class ContactInfo {
    constructor( public description:string) { }
}

我在app.component.ts中加载了上面的类，代码如下。我使用templateUrl，我的主html存在（你可以在第3个代码部分看到它）。

import {Component} from 'angular2/core';
import {ContactInfo} from './contactinfo';
@Component({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
 })
export class AppComponent { 

    title = 'Angular App';
    name = "Fotis";
    lastName = "Karalis";
    myTitle = 'Web Developer';
    information = [
      new ContactInfo('HTML5 = Regards DOM'),
      new ContactInfo('CSS3 = Regards DOM styling')
    ];
    myInfo = this.information[0];
    addInfo(newInfo:string) {
      if (newInfo) {
        this.information.push(newInfo);
      }
    }
 }

我的主要app.component html是：

<h1>Project: {{title}}</h1>
<span>{{name}}</span>
<span>{{lastName}}</span>
<a href="#">Position: {{myTitle}}</a>
<h4>Skills</h4>
<ul>
  <li *ngFor="#info of information">
   <pre>{{ info.description }} </pre>
  </li>
</ul>

<input #newInfo
  (keyup.enter)="addInfo(newInfo.value)"
  (blur)="addInfo(newInfo.value); newInfo.value='' ">

<button (click)=addInfo(newInfo.value)>Add</button>

Answer 1

这是您的问题的工作演示：

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

刚改变了你的方法：

addInfo(newInfo:string) {
    if (newInfo) {
        this.information.push(new ContactInfo(newInfo));
    }
  }

您尚未为exported类ContactInfo创建新实例，因此您的字符串未正确推入数组。

Answer 2

添加

时

this.information.push(newInfo);

您不会添加ContactInfo实例，但不会添加描述属性的字符串。

Angular2 - 添加新的<li>项onClick事件

2 个答案: