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

z3yyvxxp  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(209)

我收到一个对象,看起来像这样:x1c 0d1x
我尝试使用ng-repeat将每个对象的“Message”、“Priority”和“DateTime”属性显示为ul中的li项。
我已经尝试了几种方法,包括ng-repeat和ngFor,它们都像第一个选项一样被 Package 在div中:
1.这似乎是正确的方法,但没有返回任何东西:
第一个月
1.此选项按预期返回特定对象:
<li style="border-radius: 3px" [ngStyle]="{'color' : alertText}" > Notification: {{ allNotifications.Notifications['0'].Message['0'] }} </li>
1.无法编译:
<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
  }
}

字符串

ruyhziif

ruyhziif1#

ng-repeat是AngularJS框架的指令。
你使用的是Angular,所以在你的例子中,你应该使用ngFor

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

字符串

lrl1mhuk

lrl1mhuk2#

使用angular时,你应该忘记ng-repeat,它是AngularJS(版本<= 1.6)的一部分。
我认为你有双重问题,第一个,正如所说,是ng-repeat,第二个是你没有很好地定位你的数据。
试试这个
模板

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

字符串

相关问题