2016-07-02 2 views
0

Я Строим 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 ..

П.

+0

ли консоль дает вам правильное значение? Я подозреваю, что getPostion называется слишком рано. Можете ли вы позволить им сначала создать их и переместить в ngAfterViewInit через ViewChildren. Использование Viewchildren: http://stackoverflow.com/q/38149322/652850 –

+0

создал идентификатор в timslotRow bij, добавляя '#timeLineRow' и реализуя ngAfterViewInit, myDiv в этом ngAfterViewInit (@ViewChild ('timeLineRow') myDiv;) пуст ... При входе в консоль ngAfterViewInit вызывается до завершения рендеринга :( – Paul

+0

введен слишком рано :) – Paul

ответ

0

Я подозреваю getPostion называется слишком рано. Можете ли вы позволить создать представление компонентов, а затем переместить в ngAfterViewChecked с помощью ViewChildren/ViewChild. См Viewchildren usage ngAfterViewChecked вызывается несколько раз, поэтому убедитесь, что репозиция логика не вызывается снова

Смежные вопросы