使用 ng-repeat 或 ngFor 将 JSON 对象中的每个对象显示为单独的列表项

Question

我收到一个看起来像这样的对象：

我正在尝试使用 ng-repeat 将每个对象的 "Message"、"Priority" 和 "DateTime" 属性显示为 ul 中的 li 项。

我尝试了几种方法，包括 ng-repeat 和 ngFor，它们都像第一个选项一样被包裹在 div 中：

这似乎是正确的方法，但returns完全没有：

<div style="background: red;"> <ul> <li ng-repeat="Notification in allNotifications">{{Notification}}</li> </ul> </div>
这个选项returns符合预期的特定对象：

<li style="border-radius: 3px" [ngStyle]="{'color' : alertText}" > Notification: {{ allNotifications.Notifications['0'].Message['0'] }} </li>
不编译：

<li style="border-radius: 3px" [ngStyle]="{'color' : alertText}" [ngFor]="let subItem of allNotifications.Notifications['0'].Message['0']"> Notification: {{ subItem }} </li>

我的 TS 是这样的：

export class EventLogComponent implements OnInit {

  constructor(private _dashdata: DashdataService) { }

  NotificationName: string;
  alertText: string;
  allNotifications: JSON;

  ngOnInit() {
    this.NotificationName = 'NoNameAvailable';
    this.alertText = 'Black'; //TODO: set color according to threatlevel

    setInterval(() => {
      this._dashdata.getAllNotifications()
        .subscribe(res => {
          this.allNotifications = res['notificationdata'];
          console.log(this.allNotifications);
        });
    }, 5000); // Data Update interval in MS
  }
}

Answer 1

ng-repeat 是框架 AngularJS 的指令。

你正在使用 Angular 所以在你的情况下你应该使用 ngFor:
<div style="background: red;"> <ul> <li *ngFor="let notification of allNotifications">{{notification}}</li> </ul> </div>

Answer 2

使用 angular 你应该忘记 AngularJS（版本 <= 1.6）

之外的 ng-repeat

我认为你有两个问题，第一个，如前所述，是 ng-repeat，第二个是你没有很好地定位你的数据。

试试这个

模板

<div style="background: red;">
  <ul>
    <li *ngFor="let not of allNotifications.Notification">{{not}}</li>
  </ul>
</div>

使用 ng-repeat 或 ngFor 将 JSON 对象中的每个对象显示为单独的列表项

Using ng-repeat or ngFor to display each object in a JSON object as individual list items

frontend

json

typescript

angular

angular6