当我使用ngFor时，如何使我的角文件HTML页面的一部分“旋转/转换”？

Question

我想弄清楚如何用我的飞镖项目做点什么，但我不知道从哪里开始。首先，Dart是我正在学习的第一种语言。在过去的几个月里，我投入了100多个小时来训练和建造这个项目。这也是我在语言方面的第一个主要项目，我真的很喜欢我所能想到的。

这是我的项目委员会页面的布局。这是仪表板页面。在我的web应用程序中，我正在使用dart服务器上的mongo_dart从一个Mongo接收数据。然后，我将这些数据序列化到我认为是一个列表中。我正在为每个项目创建一张卡片，其中包括关于该项目的一些基本信息(该信息来自数据库)。哦，这张卡片我想包括所有的“项目任务”(我用ngFor放入材料芯片中)，但是每个项目都会有更多的10+任务，这占用了页面上的大量空间。因此，为了节省空间，我希望卡片一次只显示3个任务，然后在几秒钟后旋转到下一个任务，以此类推。所以每一张卡都会有3个芯片，然后芯片会切换到下一个，等等。目标是创建一个页面，让人们可以看到并快速看到打开的项目和任务/任务分配给谁以及任务的状态是什么。能够在页面上看到5-10张项目卡片是非常理想的。我相信我可以使用角动画隐藏/删除我的地图的部分，然后设置一个时间转换，以揭示下一个，但我也不知道如何开始这一点。

我在下面张贴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>

Answer 1

所以AngularDart本身没有什么特别的动画。我们倾向于只使用CSS动画，而且通常不会错过它们。

我可以看到几种不同的方法来做到这一点：

• 让DOM中的所有实体始终存在，但确保芯片所在的区域隐藏了溢出。然后在计时器上转换芯片，使不同的芯片在视口。
• 更改计时器上的列表条目。这将有一个问题，没有动画，但它将是最简单的。
• 有两份名单。将第一个列表动画化，并将第二个列表动画化。

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