Question

出于某种原因，ngIf似乎无法发挥作用。

如果我添加*ngIf="main.visible"代码失败，如果删除它，代码就可以正常工作。

任何想法

以下是我的示例：http://codepen.io/patrioticcow/pen/YqxVNq?editors=1010

更新：我接受代码中该地点ngIf未解决的答案。如果您读到这个，并且您认为这是一个错误（可能已经解决），请在评论或其他内容中指出。感谢

＆＃13;

// add component 
(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: `<div *ngFor="#main of content; #i=index"  *ngIf="main.visible">{{main.title}} - {{main.visible}} </div>`
    })
    .Class({
      constructor: function() {

        this.content = [{
          title: 'test a',
          visible: true
        }, {
          title: 'test b',
          visible: true
        }, {
          title: 'test c',
          visible: true
        }, {
          title: 'test d',
          visible: false
        }, ];
      }
    });
})(window.app || (window.app = {}));

// bootstrap app
(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

＆＃13;

html {
  background: linear-gradient(#0143A3, #0273D4);
  height: 100%;
}
body {
  text-align: center;
  color: #fff;
  padding-top: 180px;
}

＆＃13;

<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>
<my-app>

</my-app>

＆＃13;

Answer 1

我认为当时的局部变量main没有得到解决。创建一个额外的div并在* ngFor

中包含* ngIf

Answer 2

*ngFor和*ngIf不支持同一元素

<div *ngFor="let main of content; let i=index"  *ngIf="main.visible">
        {{main.title}} - {{main.visible}}
</div>

而是需要将完整语法用于

中的至少一个

<template ngFor let-main [ngForOf]="content" let-i="index">
  <div *ngIf="main.visible">
        {{main.title}} - {{main.visible}}
  </div>
</template>

或

<template [ngIf]="condition">
  <div *ngFor="let main of content; #i=index">
        {{main.title}} - {{main.visible}}
  </div>
</template>

取决于所需的行为。

另见CodePen example

`ngIf`问题，如何？

2 个答案: