This question already has answers here:
angular 2: combining *ngIf and *ngFor executes loop with a last undefined item

(2 个回答)


4年前关闭。




出于某种原因,ngIf 似乎不起作用。

如果我添加 *ngIf="main.visible" 代码失败,如果我删除它代码工作得很好。

有任何想法吗

这是我的例子:http://codepen.io/patrioticcow/pen/YqxVNq?editors=1010

更新:我会接受 ngIf 未在代码中的那个位置解析的答案。如果您阅读本文,并且您认为这是一个错误(可能已解决),请在评论或其他内容中指出。谢谢

// 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 = {}));
html {
  background: linear-gradient(#0143A3, #0273D4);
  height: 100%;
}
body {
  text-align: center;
  color: #fff;
  padding-top: 180px;
}
<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>

最佳答案

我认为局部变量 main 那时还没有解决。创建一个额外的 div 并在 *ngFor 中包含 *ngIf

关于javascript - `ngIf` 问题,怎么办?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36296877/

10-12 15:06