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

Posted 2021-04-09

我收到一个看起来像这样的物体：qazxsw poi

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

我尝试了几种方法，包括ng-repeat和ngFor，其中所有方法都包含在div中，如第一个选项：

1. 这似乎是正确的方法，但没有返回任何东西：
2. 此选项按预期返回特定对象： <div style="background: red;"> <ul> <li ng-repeat="Notification in allNotifications">{{Notification}}</li> </ul> </div>
3. 不编译： <li style="border-radius: 3px" [ngStyle]="{'color' : alertText}" > Notification: {{ allNotifications.Notifications['0'].Message['0'] }} </li>

我的TS看起来像这样：

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

答案

使用角度你应该忘记ng-repeat是AngularJS的一部分（版本<= 1.6）

我认为你有一个双重问题，第一个问题是ng-repeat，第二个问题是你没有很好地定位你的数据。

试试这个

模板

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
  }
}

另一答案

<div style="background: red;"> <ul> <li *ngFor="let not of allNotifications.Notification">{{not}}</li> </ul> </div> 是框架AngularJS的指令。

你正在使用Angular，所以在你的情况下你应该使用ngFor： ng-repeat