Im trying to figure out how to do something with my dart project and I am not really sure where to start. To preface this, Dart is the first language that I am learning fully. I have put over 100 hours into training and building this project over the past few months. This is also my first major project in the language, and I really am loving what I have been able to come up with.
Here is the layout of one of my Project Board pages. This is the Dashboard page. On my web app, I am receiving data from a Mongo Db using mongo_dart on a dart server. I am then taking the data and serializing it into what I believe is a List. I am creating a card for each project that includes some basic information about the project (That info is from the database). Oh this card I want to include all of the "project tasks" (that I put into material-chips using ngFor), but there will be upwards of 10+ tasks per project, which takes up a lot of room on the page. So to save space, I would like for the card to show only 3 tasks at a time, then rotate to the next 3 after a few seconds, and so on. So each card will have 3 chips, then the chips will change to the next 3, etc. The goal is to make a page that someone can glimpse at and quickly see the open projects and the tasks/who the task is assigned to and what the status is. being able to see 5-10 project cards on a page is ideal. I believe I can use Angular Animations to hide/remove portions of my map, then set up a timer for the transition to reveal the next , but again I have no idea how to start this.
I am posting the HTML below but I am more than happy to post any more info that you may need. I am running Dart Version 2. Also, I know my code is not the prettiest. I am still learning so any input on improvements I can make will be super helpful! Also if anyone has any advice on how to reuse portions of my html instead of having it copied 5 times (because of ngIf), I am open to hearing it!
<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>
答案 0 :(得分：1)
因此AngularDart本身对动画没有任何特殊要求。我们倾向于只使用CSS动画，并且通常不会错过它们。
我可以看到几种不同的方法：
很高兴您喜欢使用Dart和AngularDart。