Отображение ячеек таблицы

115
17 февраля 2021, 09:00

Есть таблица, в нее по клику будут записываться события. Сейчас они пустые, там есть только число месяца. Проблема в отображении ячеек этой таблицы.Что нужно написать, чтобы ячейки отображались?

<tbody>
 <tr *ngFor="let week of weeks">
  <td *ngFor="let day of week" class="day-of-month">
   <div class="events">
    <span class="day-number">{{ day | date:'d' }}</span>
   </div>
  </td>
 </tr>
</tbody>

app.component.ts

export class AppComponent implements OnInit {
date: Date;
weeks: Array<Array<Date>>;
constructor( private datePipe: DatePipe, private calendar: CalendarService) 
{}
ngOnInit() {
 this.date = new Date();
}
 transformDate(date) {
  return this.datePipe.transform(date, 'MM-yyyy');
 }
 prevMonth() {
  this.date = new Date(this.date);
  this.date.setMonth(this.date.getMonth() - 1);
 }
 nextMonth() {
  this.date = new Date(this.date);
  this.date.setMonth(this.date.getMonth() +1);
 }
 now() {
  this.date = new Date();
 }

calendar.service.ts

export class CalendarService {
currentDate: Date;
daysInWeek = 7;
Sun = 0;
constructor() {
  this.currentDate = new Date();
}
setDate(date: Date) {
  this.currentDate = date;
}
getWeeks(): Array<Array<Date>> {
  let date: Date = this.getFrom();
  const endDate = this.getTo();
  const weeks = [];
  while (endDate > date) {
   const week = [];
   for (let i = 1; i <= this.daysInWeek; i++) {
      week.push(date);
      date = new Date(date);
      date.setDate(date.getDate() +1);
   }
   weeks.push(week);
  }
  return weeks;
  }
 prevMonth(): CalendarService {
  this.currentDate = new Date(this.currentDate);
  this.currentDate.setMonth(this.currentDate.getMonth() -1);
  return this;
  }
 nextMonth(): CalendarService {
  this.currentDate = new Date(this.currentDate);
  this.currentDate.setMonth(this.currentDate.getMonth() +1);
  return this;
 }
 today() {
  this.currentDate = new Date();
  return this;
 }
getFrom() {
 const from = new Date(this.currentDate.getFullYear(), 
 this.currentDate.getMonth(), 1);
let day: number;
day = from.getDay();
if (0 === day) from.setDate(-6);
else from.setDate(from.getDate() - (day - 1));
return from;
}
getTo() {
 let lastDay = new Date(this.currentDate.getFullYear(), 
 this.currentDate.getMonth() + 1, 0);
if (this.Sun === lastDay.getDay()) return lastDay;
lastDay = new Date(lastDay.getFullYear(), lastDay.getMonth() + 1, 
(this.daysInWeek - lastDay.getDay()));
return lastDay;
 }
}
Answer 1

Проверьте, передается ли в дериктиву *ngFor массив "weeks" и правильный ли у него формат, без вводного массива, ngFor не будет строить ячейки.

READ ALSO
Как встроить скрипты в html\css

Как встроить скрипты в html\css

Учусь делать сайт на HTML\CSS и меня попросили встроить пару скриптов(время,дата)Порылся в инете, так и не понял как встроить их в мой сайт

123
Имитатор браузера

Имитатор браузера

Добрался до самой сложной части проектаНужно получать информацию из сайта который целиком и полностью построен на js(на zepto если быть конкретней)

96
Змейка. как начать игру заново

Змейка. как начать игру заново

Создаю первую игру на JSНе могу начать игру заново - при нажатии на confirm ok появляется все вновь, но змейка не двигается, как вначале

116
Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=&ldquo;prim&rdquo; и name=&ldquo;prim2&rdquo; то выводит только name=&ldquo;prim2&rdquo;(value)

Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=“prim” и name=“prim2” то выводит только name=“prim2”(value)

Если хотите иметь возможность выбрать несколько вариантов, то radio - не самый подходящий вариантСемантически правильнее будет использовать...

129