ng 模板不能重复数据但 HTML 元素可以显示它

Question

我想使用 ng 模板显示 json 数据但无法显示数据。但是当我使用 div 或 span 之类的 HTML 元素时，它可以显示它

json格式

常量 arr = [ { “日期”：1， “颜色”：“正常” }, { “日期”：2， “红色” }, { “日期”：3， “颜色”：“正常” } ]

在 TS 中；

dateArray: any;

public getJSON() {
     return this.http.get("../assets/eventcalendar.json")
        .pipe(map(res => res.json()));
  }

  getCalendar(){
    this.getJSON()
    .subscribe((event:any)=>{
        let getEvent = JSON.stringify(event);
        this.dateArray = JSON.parse(getEvent);
        console.log('this.dateArray', this.dateArray);
    })

  }

在 HTML 中：（此模板无法显示 json 数据）

<p-calendar (onSelect)="select($event)" [inline]="true" selectionMode="multiple" readonlyInput="true">
  <ng-template pTemplate="body" let-item="dateArray">
    <span 
      [ngClass]="item.color">
      {{item.tgl}}
    </span>
  </ng-template>
</p-calendar>

在 HTML 中：（此模板可以显示 json 数据但日历 UI 不好）

<p-calendar (onSelect)="select($event)" [inline]="true" selectionMode="multiple" readonlyInput="true">
  <ng-template pTemplate="body">
    <span *ngFor="let item of dateArray"
      [ngClass]="item.color">
      {{item.tgl}}
    </span>
  </ng-template>
</p-calendar>

我使用primeng calendar作为日历并使用angular 7 latest 谢谢

Answer 1

@Alkim Al，试试这个

将其更改为

<ng-template pTemplate="body" let-item="dateArray">

下线

<ng-template ngFor let-item [ngForOf]="dateArray">

这可能会解决您的问题。欲了解更多信息check here once