使用 ngFor 时如何制作 Angular Dart HTML 页面 "Rotate/transition" 的部分内容？
How do I make parts of my Angular Dart HTML page "Rotate/transition" when using ngFor?
我想弄清楚如何用我的飞镖项目做点什么，但我不确定从哪里开始。首先，Dart 是我正在全面学习的第一门语言。在过去的几个月里，我已经投入了 100 多个小时来培训和构建这个项目。这也是我在该语言方面的第一个主要项目，我真的很喜欢我能够想出的东西。
这是我的一个项目板页面的布局。这是仪表板页面。在我的网络应用程序中，我在 dart 服务器上使用 mongo_dart 从 Mongo Db 接收数据。然后我获取数据并将其序列化为我认为是列表的内容。我正在为每个项目创建一张卡片，其中包含有关该项目的一些基本信息（该信息来自数据库）。哦，这张卡片我想包括所有 "project tasks"（我使用 ngFor 放入 material-chips），但是每个项目将有超过 10+ 个任务，这会占用很多空间在页面上。所以为了节省 space，我希望卡片一次只显示 3 个任务，然后在几秒钟后轮换到下一个 3，依此类推。所以每张卡片将有 3 个筹码，然后筹码将变为下一个 3，依此类推。目标是制作一个页面，人们可以瞥见并快速查看打开的项目和任务分配给 tasks/who以及状态是什么。能够在一个页面上看到 5-10 个项目卡片是最理想的。我相信我可以对地图的 hide/remove 部分使用 Angular 动画，然后为过渡设置一个计时器以显示下一个，但我还是不知道如何开始这个。
我正在 post 阅读下面的 HTML，但我非常乐意 post 您可能需要的更多信息。我是 运行 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>
所以 AngularDart 本身并没有什么特别的动画。我们倾向于只使用 CSS 个动画并且通常不会错过它们。
我可以看到几种不同的方法：
- 一直让所有实体都在 DOM 中，但要确保芯片所在区域的溢出被隐藏。然后在计时器上转换芯片，以便不同的芯片出现在视口中.
- 更改计时器上的列表条目。这会存在没有动画的问题，但这是最简单的。
- 有两个列表。对第一个列表进行动画处理，对第二个列表进行动画处理。
很高兴您喜欢使用 Dart 和 AngularDart。
我想弄清楚如何用我的飞镖项目做点什么，但我不确定从哪里开始。首先，Dart 是我正在全面学习的第一门语言。在过去的几个月里，我已经投入了 100 多个小时来培训和构建这个项目。这也是我在该语言方面的第一个主要项目，我真的很喜欢我能够想出的东西。
这是我的一个项目板页面的布局。这是仪表板页面。在我的网络应用程序中，我在 dart 服务器上使用 mongo_dart 从 Mongo Db 接收数据。然后我获取数据并将其序列化为我认为是列表的内容。我正在为每个项目创建一张卡片，其中包含有关该项目的一些基本信息（该信息来自数据库）。哦，这张卡片我想包括所有 "project tasks"（我使用 ngFor 放入 material-chips），但是每个项目将有超过 10+ 个任务，这会占用很多空间在页面上。所以为了节省 space，我希望卡片一次只显示 3 个任务，然后在几秒钟后轮换到下一个 3，依此类推。所以每张卡片将有 3 个筹码，然后筹码将变为下一个 3，依此类推。目标是制作一个页面，人们可以瞥见并快速查看打开的项目和任务分配给 tasks/who以及状态是什么。能够在一个页面上看到 5-10 个项目卡片是最理想的。我相信我可以对地图的 hide/remove 部分使用 Angular 动画，然后为过渡设置一个计时器以显示下一个，但我还是不知道如何开始这个。
我正在 post 阅读下面的 HTML，但我非常乐意 post 您可能需要的更多信息。我是 运行 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>
所以 AngularDart 本身并没有什么特别的动画。我们倾向于只使用 CSS 个动画并且通常不会错过它们。
我可以看到几种不同的方法：
- 一直让所有实体都在 DOM 中，但要确保芯片所在区域的溢出被隐藏。然后在计时器上转换芯片，以便不同的芯片出现在视口中.
- 更改计时器上的列表条目。这会存在没有动画的问题，但这是最简单的。
- 有两个列表。对第一个列表进行动画处理，对第二个列表进行动画处理。
很高兴您喜欢使用 Dart 和 AngularDart。