Question

我是棱角分明的新手，当我点击它时，我正试图改变每个li的颜色。
但是我收到错误VM1052：19错误：（SystemJS）TypeScript转换失败
你能告诉我如何解决它。
以下提供代码

http://plnkr.co/edit/npNw39aRZVgpqEjI6uLH?open=app%2Fapp.component.ts&p=preview

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [`
    li {
      color: red;
    }
  `],
  template: `<ul class= "master">
                <li *ngFor ="let student of liArraycontent" (click) = "liClicked($event)"> {{student}} </li>
              </ul>`
})
export class AppComponent { 
  name = 'Angular';
  liArraycontent = ["testing 1", "testing 2", "testing3"]

  liClicked = function(e1) {
    console.log(e1.target);
    e1.addCss(color: green);
  }


}

Answer 1

你只需要添加样式属性。

在点击事件中添加此行：

e1.target.setAttribute("style", "color: green;");

链接到工作的plnkr： http://plnkr.co/edit/w1i9v1fJ02htbDrtkWUy?open=app%2Fapp.component.ts&p=preview

Answer 2

编写随机代码并查看它是否有效可能不是学习Angular的最佳方法。相反，您应该阅读教程和指南。在您的特定情况下，最简单的方法是向模板添加style属性：

// template
<ul class= "master">
  <li 
    *ngFor ="let student of liArraycontent; let i = index" 
    (click)="liClicked(i)" 
    [style.color]="colors[i]">
    {{student}}
   </li>
 </ul>

// component
color: 'blue';

liClicked(index) { this.colors[index] = 'green'; }

这是plunkr。

就原始代码而言：

事件处理程序将传递一个事件，而不是一个元素。如果您真的想从活动中获取元素，则需要event.target。
我不知道元素上有任何setCss方法。
语法setCss(color: green)无效。 key: value对出现在对象文字中。如果有setCss方法，则没有，它可能会被称为setCss({color: 'green'})，其中green是一个字符串，因此需要引用;否则它将被解释为变量。
在正确的Angular样式中，您不会自己操纵DOM元素，无论是在它们上还是为其他任何东西设置样式。相反，您编写模板以使用上述代码中的color等组件属性，使用[style.color]等属性来驱动元素行为。

VM1052：19错误：（SystemJS）TypeScript转换失败

2 个答案: