使用ngFor时，如何将Angular Dart HTML页面的一部分“旋转/转换”？

问题描述 投票：1回答：1

我想弄清楚如何用我的飞镖项目做点什么，我不知道从哪里开始。为此，Dart是我学习的第一种语言。在过去的几个月里，我已经花了100多个小时进行培训和建设这个项目。这也是我用这种语言的第一个重大项目，我真的很喜欢我能想到的。

这是我的一个项目板页面的布局。这是仪表板页面。在我的网络应用程序上，我使用dart服务器上的mongo_dart从Mongo Db接收数据。然后，我将数据并将其序列化为我认为是List的数据。我正在为每个项目创建一张卡片，其中包含有关项目的一些基本信息（该信息来自数据库）。哦，这张卡我想要包括所有“项目任务”（我使用ngFor将其放入材料芯片中），但每个项目将有超过10个任务，这会在页面上占用大量空间。因此，为了节省空间，我希望卡一次只显示3个任务，然后在几秒后旋转到下一个3，依此类推。因此每张卡片将有3个筹码，然后筹码将变为接下来的3个等等。目标是创建一个有人可以瞥见的页面并快速查看打开的项目和任务/任务分配给谁以及什么状态是。能够在页面上看到5-10个项目卡是理想的。我相信我可以使用Angular Animations来隐藏/删除我的地图部分，然后为转换设置一个计时器以显示下一个，但我又不知道如何启动它。

我发布了下面的HTML，但我非常乐意发布您可能需要的更多信息。我正在运行Dart Version 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>

dart angular-dart
1个回答
1
投票

因此AngularDart本身对动画没有任何特殊之处。我们倾向于使用CSS动画，一般都没有错过它们。

我可以看到几种不同的方法：

  • 始终拥有DOM中的所有实体，但要确保芯片所在区域的溢出是隐藏的。然后在计时器上转换芯片，使不同的芯片位于视口中。
  • 更改计时器上的列表条目。这会产生不动画的问题，但这将是最简单的问题。
  • 有两个清单。为第一个列表设置动画，并为其中的第二个列表设置动画。

很高兴你喜欢使用Dart和AngularDart。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.