【发布时间】：2018-09-18 19:57:57
【问题描述】：
我想弄清楚如何用我的飞镖项目做点什么，但我不确定从哪里开始。作为序言，Dart 是我正在充分学习的第一门语言。在过去的几个月里，我已经投入了 100 多个小时来培训和构建这个项目。这也是我在这门语言中的第一个重大项目，我真的很喜欢我能想出的东西。
这是我的项目板页面之一的布局。这是仪表板页面。在我的网络应用程序上，我正在使用 mongo_dart 在 dart 服务器上从 Mongo Db 接收数据。然后我将数据序列化为我认为的列表。我正在为每个项目创建一张卡片，其中包含有关项目的一些基本信息（该信息来自数据库）。哦，这张卡片我想包含所有“项目任务”（我使用 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>
【问题讨论】：
标签： dart angular-dart