Question

我的英语不好，如果语法不对，请告诉我。

我试图通过点击ngFor元素中的<li>来更改文字，但点击事件无效。

我创建了一个plunker，其中有一个正确的例子。

您还可以看到我在检查代码和angular.io路由器课程here

之间的差异时所做的更改

有关您的信息，这是我的步骤：

删除ngFor
将英雄变量更改为组件中的get（）属性
更改onSelect方法以修改hero.name累积“点击”字符串结束

＆＃13;

@Component({
  template: `
    <h2 (click)="test1()">HEROES</h2>
    <ul class="items">
      <li *ngFor="let hero of heroes "
        [class.selected]="isSelected(hero)"
        (click)="onSelect(hero)">
        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
      </li>
    </ul> 
  `
})
export class HeroListComponent implements OnInit {
  
 
  get heroes() {
    return [
       new Hero(11, 'Mr. Nice'),
       new Hero(12, 'Narco'),
       new Hero(13, 'Bombasto'),
       new Hero(14, 'Celeritas'),
       new Hero(15, 'Magneta'),
       new Hero(16, 'RubberMan')
    ]; 
  } 
  
  test1(){
    //alert(1);
  }  
  
  onSelect(hero: Hero) {
    hero.name += 'click';
  }

}

＆＃13;

更新2016/12/14

当我发现getProperty会使ngFor重复执行时，我创建了一个带有一点实验的plunker（plnkr.co/edit/bkXYuyLtq5OrPoEQpNmC?p=preview）

原理图说明（imageshack.com/i/ponHcO7Vp）

ng使用get property（）对象，它们最多会获得100次，因为它们总是返回新对象。
当您通过其他路由器重新进入该页面时，它最多只会重复3次，并且所有对象都会重新生成（从console.log开始，您可以看到来自累加器重新计算）
当你点击页面的任何元素被触发时，会让NgFor重新设置数据，最多两个

这不是由get属性引起的，你可以从这个链接（jsfiddle.net/w31cqzdj/1/）看到本机javascript的for循环，而object.definedProperty只会调用一次

输出（imageshack.com/i/porsQYHAp）

Answer 1

您的代码很好，但您正在更改新的Hero参考，这就是为什么您没有看到更改效果的原因。您需要传递索引，以便获得该对象的引用，而不是传递英雄对象。

这是一个有效的版本：

match List.tryHead [Some 1; None; Some 2] with
| Some (Some x) -> sprintf "The first item exists with a value of %i" x
| _             -> "No value found"

here's这个版本的傻瓜叉子

Answer 2

更新你的英雄变量如下：

 heroes: Array<Hero>= [
       new Hero(11, 'Mr. Nice'),
       new Hero(12, 'Narco'),
       new Hero(13, 'Bombasto'),
       new Hero(14, 'Celeritas'),
       new Hero(15, 'Magneta'),
       new Hero(16, 'RubberMan')
    ];

this is the plunker

问题：问题是你的打字稿数组的参考，你正在进行匿名初始化，并且引用没有存储在任何变量中，我只是将作业更改为英雄：Array<Hero>= [..]

使用ngClick

2 个答案: