我想弄清楚如何用我的飞镖项目做点什么,我不知道从哪里开始。为此,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>
因此AngularDart本身对动画没有任何特殊之处。我们倾向于使用CSS动画,一般都没有错过它们。
我可以看到几种不同的方法:
很高兴你喜欢使用Dart和AngularDart。