使用ES5编写Angular v2（3）”迭代处理”

2 年 ago

文, 翔

2 minutes

※现在不再推荐使用这种方法。

上次我尝试了Angular v2的双向绑定。

让我们参考Angular v2官方网站上的TypeScript示例来进行循环处理。

将list-component添加到主要的HTML中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
        <script src="components/list-component/list-component.js"></script>
    </head>
    <body>
        <list-component></list-component>
    </body>
</html>

将数组heroes添加到组件的JavaScript中。

(function(app) {
    app.ListComponent = ng.core
    .Component({
        selector: 'list-component'
    })
    .View({
        templateUrl: 'components/list-component/list-component.template.html'
    })
    .Class({
        constructor: function() {
            this.heroes = ["Mr. Nice",
                           "Narco",
                           "Bombasto",
                           "Celeritas",
                           "Magneta",
                           "RubberMan",
                           "Dynama",
                           "Dr IQ",
                           "Magma",
                           "Tornado"
                          ];
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app.ListComponent);
    });
})(window.app || (window.app = {}));

在模板中，我们使用ngFor来进行重复处理。

<li *ngFor="let hero of heroes">
    {{hero}}
</li>

↓这是本次的可运行示例：https://codepen.io/puku0x/pen/ZWNLgx

据说ngFor前面的*表示将

元素（以及其子元素）作为模板。
如果对let不熟悉，可以用var来替换。

总结

使用Angular v2的ngFor代替1.x系列中存在的ngRepeat。
```
<li ng-repeat="hero in $ctrl.heroes track by $index">
    {{hero}}
</li>
```
进行了如上所述的重复处理。

在我个人看来，我很高兴地看到不再有“对于字符串数组情况，必须使用track by”的限制。但你们觉得呢？

下一次我想尝试一下点击事件。

总结