Как список отображается в Angular? - PullRequest
Новая
       76

Как список отображается в Angular?

0 голосов
/ 04 апреля 2020

Как список отображается в AngularDart? Перерисовывается ли весь список при выборе элемента списка для добавления выбранного класса к выбранному элементу? Не могли бы вы объяснить это мне или дать ссылку, где это объясняется?

hero.dart 

class Hero{
  final int id;
  String name;
  Hero(this.id,this.name);
 }

mock_heroes.dart 

import 'hero.dart';

final mockHeroes = <Hero>[
  Hero(1,"First"),
  Hero(2,"Second"),
  Hero(3,"Third")
];

app_component.dart 

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'src/hero.dart';
import 'src/mock_heroes.dart';

@Component(
  selector: 'my-app',
  directives: [coreDirectives,formDirectives],
  templateUrl: 'app_component.html',
  styleUrls: ['app_component.css'],
)

class AppComponent {
    final title = 'Tour of Heroes';
    List<Hero> heroes = mockHeroes;
    Hero selected;
    void onSelect(Hero hero) => selected = hero;
}

app_component. html

<h1>{{title}}</h1>
<h2>Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes"
        (click)="onSelect(hero)"
        [class.selected]="hero === selected" >
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>
<div *ngIf="selected != null">
    <h2>{{selected.name}}</h2>
    <div><label>id: </label>{{selected.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selected.name" placeholder="name">
    </div>
</div>
...