Question

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

格式化json

const 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日历，并使用最新的angular 7 谢谢

Answer 1

@Alkim Al，尝试一次

将此更改为

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

下一行

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

这可以解决您的问题。有关更多信息，check here once

ng模板无法重复数据，但HTML元素可以显示数据

1 个答案: