angularjs - Angular 2 - 同一 DOM 元素上的两个结构指令

标签 angularjs angular

<分区>

在使用 Angular 2 时,我遇到了一个问题:显然我不能将两个结构指令( ngForngIf )放在同一个 DOM 元素上。
在 Angular 1 中,这曾经有效。对于 example :

<div ng-repeat="item in items" ng-if="$even">{{item}}</div>

当我尝试用 Angular 2 做类似的事情时:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div *ngFor="#item of items; #e = even" *ngIf="e">{{item}}</div>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.items = ["a","b","c"]
  }
}

没有任何反应。甚至没有错误。

如果我把 ngIf子元素上的指令,it works :

<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>

但问题是我不想为此添加子元素。例如,如果它是 <tr>表格内的标记,然后添加 div inside 会使 DOM 变得奇怪。

我知道 Angular 2 仍处于测试阶段,但我想知道它是否是一个错误、一个功能,或者是否有一种未记录的方法来实现我想要的。

最佳答案

一个元素不支持两个结构指令。另见 https://github.com/angular/angular/issues/4792

而是在使用 template syntax 时嵌套它们用于外部语法和内部语法。

关于angularjs - Angular 2 - 同一 DOM 元素上的两个结构指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35100716/

相关文章:

javascript - 以 react 形式设置嵌套表单组/控件值

javascript - Angular 5函数在悬停时不断调用

javascript - Angular2组件的 "this"在执行回调函数时未定义

javascript - 函数调用后的两组括号

javascript - NG-Repeat 生成包含动态类的列表

javascript - Angular JS : Filter using textbox and Checkbox

angularjs - 如何根据传递参数的值使用 ui-router 更改模板?

css - 使用 Angular 中的 Angular Material/Flex-Layout 创建具有固定标题、固定侧边栏、固定内容部分的布局

javascript - 我可以将 ng-model 设置为两个值吗?

angular - 使用 Angular Material 表从 Angular 2 中的表中删除选定的行