Question

Angular 2中存在哪些循环类型？

我只能找到for和foreach，但我找不到其他任何内容。某个地方有名单吗？

某处有例子吗？这将有助于非常强烈地理解。

[编辑]：我基本上寻找的是Angular 2中所有不同循环类型的列表。

[编辑2]：我真正的意思是模板部分中特定于Angular 2的循环（对不起，我不知道有这么多可能性）。举个例子来说明* ngFor：

<ul class="contacts">
  <li *ngFor="#contact of contacts"
      (click)="onSelectContact(contact)"
      [class.selectedContact]="contact === selectedContact">
    <span class="badge">{{contact.id}}</span> {{contact.name}}
  </li>
</ul>

Answer 1

Angular 2中唯一的模板循环指令是ngFor，它只适用于迭代，通常是数组。（在Angular 1中，_equations = @[@"", @"", @"", @"", @"", @"", @"", @"", @"9", @"", @"", @"", @"", @"", @"", @"", @"", @"18", @"", @"", @"", @"", @"", @"", @"", @"", @"27", @"", @"", @"", @"", @"", @"", @"", @"", @"36", @"", @"", @"", @"", @"", @"", @"", @"", @"45", @"", @"", @"", @"", @"", @"", @"", @"", @"54", @"", @"", @"", @"", @"", @"", @"", @"", @"63", @"", @"", @"", @"", @"", @"", @"", @"", @"72", @"", @"", @"", @"", @"", @"", @"", @"" ,@"81" ]; NSUInteger randomEquationNo = arc4random() % [_equations count]; int index = arc4random_uniform(81); id randomNo = nil; if ([_equations count] > 0){ int index = arc4random()%[_equations count]; randomNo = [_equations objectAtIndex:index]; } NSString *e1 = @"8+2-9="; NSString *e2 = @"3x5-7="; //81 of those strings if ((index = 1)) { _equationsLabel.text = [NSString stringWithFormat:@"%@",e1]; } if ((index = 2)) { _equationsLabel.text = [NSString stringWithFormat:@"%@",e2]; //81 of those if statements也适用于对象，但Angular 2不适用。）

在显示列表之前，您可以使用pipe对列表进行格式化，过滤，排序等。

Answer 2

您可以使用Angular 2中的ngFor指令进行循环/迭代。

喜欢这个

<li *ngFor="#item of items; #i = index">...</li>

此指令的文档可在此处找到https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

这是在Angular 2的网站上的开发者指南中完成的一个例子 https://angular.io/docs/ts/latest/guide/displaying-data.html#!#showing-an-array-property-with-ngfor

Answer 3

Angular 2是一个JavaScript框架。 JavaScript循环也适用于Angular 2。请参阅以下在plunker中使用do while

http://plnkr.co/edit/s9hfAcdjW6QU0Abj8UqQ?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2> // Output Hello Angular2 0123456789

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 '
    this.testLoop();
  }

  testLoop(){
    var i = 0;
    do {
       this.name += i;
       i++;
    }
    while (i < 10);
  }
}

Answer 4

直播output click...

实施例，

<!doctype html>
<html>
<head>
    <title>ng for loop in angular 2 with ES5.</title>
    <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
    <script>
        var ngForLoop = function () {
            this.msg = "ng for loop in angular 2 with ES5.";
            this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena'];
        };

        ngForLoop.annotations = [
                new angular.Component({
                    selector: 'ngforloop'
                }),
                new angular.View({
                    template: '<H1>{{msg}}</H1>' +
                            '<p> User List : </p>' +
                            '<ul>' +
                            '<li *ng-for="#user of users">' +
                            '{{user}}' +
                            '</li>' +
                            '</ul>',
                    directives: [angular.NgFor]
                })
        ];

        document.addEventListener("DOMContentLoaded", function () {
            angular.bootstrap(ngForLoop);
        });
    </script>
</head>
<body>
    <ngforloop></ngforloop>
    <h2>
      <a href="http://www.code-sample.com/" target="_blank">For more detail...</a>
    </h2>
</body>
</html>

Angular 2中存在哪些循环类型？

4 个答案: