ng Шаблон не может повторять данные, но элемент HTML может их отображать

Я хочу показать данные json, используя шаблон ng, но не могу показать данные. Но когда я использую элемент HTML, такой как div или span, он может отображать его.

формат json

const arr = [ { "дата": 1, "цвет": "нормальный" }, { "дата": 2, "цвет": "красный" }, { "дата": 3, "цвет": "нормальный" } ]

In 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);
    })

  }

In HTML: (This template can not show the json data) 

<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, но пользовательский интерфейс календаря не очень удобен)

<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. Спасибо.


typescript primeng angular7
person Alkim Al    schedule 07.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

@ Алким Ал, попробуй один раз

изменить это на

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

под строкой

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

это может решить вашу проблему. Для получения дополнительной информации проверьте здесь один раз

person Ganesh    schedule 07.02.2019
comment
Я пробовал это, но ничего не происходит. - person Alkim Al; 07.02.2019
comment
Если я использую только ng-template вместо элемента p-calendar из Primeng, данные отображаются и работают хорошо. Какой первичный элемент p-календаря не может быть переопределен другими данными? - person Alkim Al; 07.02.2019