docs(toh-5/dart): make dashboard more robust (#1688)
Originally the dashboard TS expression ``heroes.slice(1, 5))` had been written as: > _heroService.getHeroes().getRange(1, 5) which is brittle; it fails if there are not enough heroes. Slice doesn't fail; an equivalent express ion in Dart is > _heroService.getHeroes().skip(1).take(4) This is now used. Other changes: - Fix in css (missed TS-side update). - Ran `dartfmt` on `heroes_component.dart`.
This commit is contained in:
parent
eda47f64e8
commit
f8e6b5d1f7
|
@ -32,7 +32,7 @@ class DashboardComponent implements OnInit {
|
||||||
// #enddocregion ctor
|
// #enddocregion ctor
|
||||||
|
|
||||||
Future<Null> ngOnInit() async {
|
Future<Null> ngOnInit() async {
|
||||||
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
|
heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
|
||||||
}
|
}
|
||||||
|
|
||||||
// #docregion goto-detail
|
// #docregion goto-detail
|
||||||
|
|
|
@ -19,7 +19,7 @@ class DashboardComponent implements OnInit {
|
||||||
DashboardComponent(this._heroService);
|
DashboardComponent(this._heroService);
|
||||||
|
|
||||||
Future<Null> ngOnInit() async {
|
Future<Null> ngOnInit() async {
|
||||||
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
|
heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
|
||||||
}
|
}
|
||||||
|
|
||||||
gotoDetail() {/* not implemented yet */}
|
gotoDetail() {/* not implemented yet */}
|
||||||
|
|
|
@ -3,4 +3,4 @@ class Hero {
|
||||||
String name;
|
String name;
|
||||||
|
|
||||||
Hero(this.id, this.name);
|
Hero(this.id, this.name);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
// #docplaster
|
// #docplaster
|
||||||
// #docregion
|
// #docregion , v2
|
||||||
// #docregion v2
|
|
||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
import 'dart:html';
|
import 'dart:html';
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
margin: 0 0 2em 0;
|
margin: 0 0 2em 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 10em;
|
width: 15em;
|
||||||
}
|
}
|
||||||
.heroes li {
|
.heroes li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -14,10 +14,9 @@ import 'hero_service.dart';
|
||||||
selector: 'my-heroes',
|
selector: 'my-heroes',
|
||||||
// #enddocregion heroes-component-renaming
|
// #enddocregion heroes-component-renaming
|
||||||
templateUrl: 'heroes_component.html',
|
templateUrl: 'heroes_component.html',
|
||||||
styleUrls: const ['heroes_component.css'],
|
styleUrls: const ['heroes_component.css'],
|
||||||
directives: const [HeroDetailComponent]
|
directives: const [HeroDetailComponent])
|
||||||
// #docregion heroes-component-renaming
|
// #docregion heroes-component-renaming
|
||||||
)
|
|
||||||
// #enddocregion heroes-component-renaming, metadata
|
// #enddocregion heroes-component-renaming, metadata
|
||||||
// #docregion class, heroes-component-renaming
|
// #docregion class, heroes-component-renaming
|
||||||
class HeroesComponent implements OnInit {
|
class HeroesComponent implements OnInit {
|
||||||
|
@ -37,9 +36,13 @@ class HeroesComponent implements OnInit {
|
||||||
getHeroes();
|
getHeroes();
|
||||||
}
|
}
|
||||||
|
|
||||||
void onSelect(Hero hero) { selectedHero = hero; }
|
void onSelect(Hero hero) {
|
||||||
|
selectedHero = hero;
|
||||||
|
}
|
||||||
|
|
||||||
Future<Null> gotoDetail() =>
|
Future<Null> gotoDetail() => _router.navigate([
|
||||||
_router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
|
'HeroDetail',
|
||||||
|
{'id': selectedHero.id.toString()}
|
||||||
|
]);
|
||||||
// #docregion heroes-component-renaming
|
// #docregion heroes-component-renaming
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue