Я Строим Timeline расписание в Angular2, выполнив следующие действия:Angular2 получить Div позицию дал #id
<div class="timelineRow" *ngFor="let team of teams">
<div class="RowDescriptionColumn">{{team.title}}</div>
<div class="scheduleblock" *ngFor="let date of dates; let index=index; let odd=odd; let even=even;">
<div class="timeslot1" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts1'"></div>
<div class="timeslot2" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts2'"></div>
<div class="timeslot3" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts3'"></div>
<div class="timeslot4" [ngClass]="{ odd: odd, even: even }" [attr.id]="team.teamId +'_'+ date.id +'_ts4'"></div>
</div>
<div class="eventBlock" *ngFor="let event of events" [style.left]="getPosition(team, event)">{{event.title}}</div>
</div>
Итак, сначала я построить временные интервалы (4 за дату), а потом, на вершине этих Timslot -Дивы я хочу проложить события. Событие должно начинаться на правильную дату, поэтому я стараюсь, чтобы получить позиции, делая JQuery (я знаю: зло) ..
getPosition(team, event): string {
if (this.dates) {
let left = "0px";
let found = this.dates.filter(myObj => new Date(myObj.date).toDateString() === new Date(event.start).toDateString())[0];
if (found) {
let pos = jQuery(this.elementRef.nativeElement).find('#' + team.teamId + '_' + found.id + '_' + 'ts3').position();
console.log(pos);
if (pos) {
left = pos.left + "px";
}
}
return left;
}
}
это не работает, но я не могу понять, как получить начальный Положение "нижележащего" Timeslot-Div ..
П.
ли консоль дает вам правильное значение? Я подозреваю, что getPostion называется слишком рано. Можете ли вы позволить им сначала создать их и переместить в ngAfterViewInit через ViewChildren. Использование Viewchildren: http://stackoverflow.com/q/38149322/652850 –
создал идентификатор в timslotRow bij, добавляя '#timeLineRow' и реализуя ngAfterViewInit, myDiv в этом ngAfterViewInit (@ViewChild ('timeLineRow') myDiv;) пуст ... При входе в консоль ngAfterViewInit вызывается до завершения рендеринга :( – Paul
введен слишком рано :) – Paul