Angular ng-repeat不起作用,但是我能够单独显示数组元素

时间:2018-11-12 03:09:21

标签: angular angularjs-ng-repeat

问题:我无法看到要使用ng-repeat打印的任何字符串数组元素。

组件:

import { 
  Component 
} from '@angular/core'; 

@Component ({ 
  selector: 'my-app', 
  templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
  TutorialName: string = 'Angular JS2'; 
  appList: string[] = ["Binding", "Display", "Services"];
  currentTime = new Date(); 
}

模板:

  <div> 
     The first item is {{appList[0] }}<br> 
     The first item is {{appList[0] | lowercase}} (lowercase)<br> 
     The first item is {{appList[0] | uppercase}} (uppercase)<br> 
     The second item is {{appList[1] }}<br> 
     The items are:
     <ol>
        <li ng-repeat="a in appList">{{a}}</li>
     </ol>
     The date/time is: {{currentTime}}<br> 
     The date/time is: {{currentTime | date:'MM/dd/yyyy'}} (date:'MM/dd/yyyy')<br> 
</div>

所有显示均找到 {{a}}。

问:访问字符串数组“ appData”的正确方法是什么,以便使用“ ng-repeat”正确打印项目?

语言版本:

Angular CLI: 7.0.5
Node: 11.1.0
OS: linux x64
Angular:
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.5
@angular-devkit/core         7.0.5
@angular-devkit/schematics   7.0.5
@schematics/angular          7.0.5
@schematics/update           0.10.5
rxjs                         6.3.3
typescript                   3.1.6

1 个答案:

答案 0 :(得分:4)

Angular不再使用ng-repeat,当Angular从AngularJS移至Angular Angular 1.X --> Angular 2+

时已更新

使用*ngFor代替使用相同的方式...

 <ol>
    <li *ngFor="let a of appList">{{a}}</li>
 </ol>

您可以了解从ng-repeat*ngFor here

的变化