Как сделать части моей страницы Angular Dart HTML «Поворот / переход» при использовании ngFor? - PullRequest
Новая
       9

Как сделать части моей страницы Angular Dart HTML «Поворот / переход» при использовании ngFor?

0 голосов
/ 18 сентября 2018

Я пытаюсь понять, как сделать что-то с моим проектом дартс, и я не совсем уверен, с чего начать.В предисловии Дарт - первый язык, который я полностью изучаю.За последние несколько месяцев я потратил более 100 часов на обучение и создание этого проекта.Это также мой первый крупный проект на языке, и мне действительно нравится то, что я смог придумать.

Вот макет одной из моих страниц доски объявлений проекта.Это страница панели инструментов.В моем веб-приложении я получаю данные из Mongo Db, используя mongo_dart на сервере dart.Затем я беру данные и сериализую их в список, который я считаю.Я создаю карту для каждого проекта, которая включает в себя некоторую основную информацию о проекте (эта информация из базы данных).О, эта карта, я хочу включить все «задачи проекта» (которые я помещаю в материальные фишки, используя ngFor), но в каждом проекте будет более 10+ задач, которые занимают много места на странице.Поэтому, чтобы сэкономить место, я хотел бы, чтобы карта показывала только 3 задачи за один раз, затем через несколько секунд переходила к следующим 3 задачам и так далее.Таким образом, каждая карта будет иметь 3 фишки, затем фишки будут заменены на следующие 3 и т. Д. Цель состоит в том, чтобы сделать страницу, на которую кто-то может взглянуть, и быстро просмотреть открытые проекты и задачи / кому назначена задача и чтостатус есть.возможность видеть 5-10 карточек проекта на странице - это идеально.Я полагаю, что могу использовать Angular Animations, чтобы скрыть / удалить части моей карты, а затем установить таймер для перехода, чтобы показать следующее, но опять же я не знаю, как это начать.

Я публикуюHTML ниже, но я более чем рад опубликовать любую дополнительную информацию, которая может вам понадобиться.Я использую Dart версии 2. Кроме того, я знаю, что мой код не самый красивый.Я все еще учусь, поэтому любой вклад в улучшения, которые я могу сделать, будет очень полезным!Кроме того, если у кого-то есть советы о том, как повторно использовать части моего html вместо того, чтобы копировать его 5 раз (из-за ngIf), я открыт для прослушивания! 

<div class="dash">
<div *ngFor="let p of projectList" style="padding: 10px">
<div class="mdc-card demo-size">
  <div class="mdc-card__media  demo-card__media">
      <div style="line-height: 1">
          <material-chips class="clickable" *ngFor="let t of taskList">
            <material-chip
            *ngIf="t.joinID == p.id && t.tStatus == 'New'"
            [removable]="false"
            popupSource
            #source="popupSource"
            buttonDecorator
            (trigger)="showPopup(source)"
            materialTooltip="{{t.genNotes}}"
            class="new">
            <div>{{t.tName}}</div>
            <div style="font-size: 10px">{{t.sTech}}</div>
            <material-popup [source]="popSource" 
                            [(visible)]="showingPopup" 
                            [enforceSpaceConstraints]="false" 
                            [preferredPositions]="[position]">
                <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                    Select Project Status
                </div>
              <material-select width="2" class="bordered-list">
                  <material-select-item *ngFor="let s of statusDropdowns"
                                        (trigger)="proto = s"
                                        [selected]="proto == s">{{s}}</material-select-item>
                </material-select>
                </material-popup>
          </material-chip>
          <material-chip
            *ngIf="t.joinID == p.id && t.tStatus == 'In Progress'"
            [removable]="false"
            popupSource
            #source="popupSource"
            buttonDecorator
            (trigger)="showPopup(source)"
            materialTooltip="{{t.genNotes}}"
            class="inprogress">
            <div>{{t.tName}}</div>
            <div style="font-size: 10px">{{t.sTech}}</div>
            <material-popup [source]="popSource" 
                            [(visible)]="showingPopup" 
                            [enforceSpaceConstraints]="false" 
                            [preferredPositions]="[position]">
                <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                    Select Project Status
                </div>
              <material-select width="2" class="bordered-list">
                  <material-select-item *ngFor="let s of statusDropdowns"
                                        (trigger)="proto = s"
                                        [selected]="proto == s">{{s}}</material-select-item>
                </material-select>
                </material-popup>
          </material-chip>
          <material-chip
            *ngIf="t.joinID == p.id && t.tStatus == 'On Hold'"
            [removable]="false"
            popupSource
            #source="popupSource"
            buttonDecorator
            (trigger)="showPopup(source)"
            materialTooltip="{{t.genNotes}}"
            class="onhold">
            <div>{{t.tName}}</div>
            <div style="font-size: 10px">{{t.sTech}}</div>
            <material-popup [source]="popSource" 
                            [(visible)]="showingPopup" 
                            [enforceSpaceConstraints]="false" 
                            [preferredPositions]="[position]">
                <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                    Select Project Status
                </div>
              <material-select width="2" class="bordered-list">
                  <material-select-item *ngFor="let s of statusDropdowns"
                                        (trigger)="proto = s"
                                        [selected]="proto == s">{{s}}</material-select-item>
                </material-select>
                </material-popup>
          </material-chip>
          <material-chip
            *ngIf="t.joinID == p.id && t.tStatus == 'Critical'"
            [removable]="false"
            popupSource
            #source="popupSource"
            buttonDecorator
            (trigger)="showPopup(source)"
            materialTooltip="{{t.genNotes}}"
            class="critical">
            <div>{{t.tName}}</div>
            <div style="font-size: 10px">{{t.sTech}}</div>
            <material-popup [source]="popSource" 
                            [(visible)]="showingPopup" 
                            [enforceSpaceConstraints]="false" 
                            [preferredPositions]="[position]">
                <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                    Select Project Status
                </div>
              <material-select width="2" class="bordered-list">
                  <material-select-item *ngFor="let s of statusDropdowns"
                                        (trigger)="proto = s"
                                        [selected]="proto == s">{{s}}</material-select-item>
                </material-select>
                </material-popup>
          </material-chip>
          <material-chip
            *ngIf="t.joinID == p.id && t.tStatus == 'Canceled'"
            [removable]="false"
            popupSource
            #source="popupSource"
            buttonDecorator
            (trigger)="showPopup(source)"
            materialTooltip="{{t.genNotes}}"
            class="canceled">
            <div>{{t.tName}}</div>
            <div style="font-size: 10px">{{t.sTech}}</div>
            <material-popup [source]="popSource" 
                            [(visible)]="showingPopup" 
                            [enforceSpaceConstraints]="false" 
                            [preferredPositions]="[position]">
                <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                    Select Project Status
                </div>
              <material-select width="2" class="bordered-list">
                  <material-select-item *ngFor="let s of statusDropdowns"
                                        (trigger)="proto = s"
                                        [selected]="proto == s">{{s}}</material-select-item>
                </material-select>
                </material-popup>
          </material-chip>
        </material-chips>
        </div>
      </div>
  <div class="demo-card__primary">
    <h2 class="demo-card__title">{{p.name}}</h2>
    <h3 class="demo-card__subtitle">{{p.projectMan}}</h3>
  </div>
  <div class="demo-card__secondary">
    {{p.description}}
  </div>
</div>

1 Ответ

0 голосов
/ 19 сентября 2018

Так что в самом AngularDart нет ничего особенного для анимации.Мы склонны просто использовать CSS-анимации и, как правило, не пропустили их.

Я видел несколько разных способов сделать это:

  • Все объекты в DOM всевремя, но убедитесь, что переполнение скрыто для области, в которой находятся микросхемы. Затем по таймеру переведите микросхемы так, чтобы в области просмотра находились разные.
  • Измените записи списка в таймере.Это может привести к не анимации, но это будет проще всего.
  • Имеет два списка.Анимируйте первый список и оживьте второй список.

Рад, что вам нравятся Dart и AngularDart.

...