AngularDart4.0 英雄之旅-教程-03英雄編輯器

碼雲項目頁：https://gitee.com/scooplolwiki/toh-1

在這一部分，您將修改起始應用程序以顯示有關英雄的信息。 而後，您將添加編輯英雄信息的功能。 完成後，應用程序應該看起來像這個實例（查看源代碼）。

構建結構

在開始編寫代碼以前，讓咱們驗證一下你的結構。 若是沒有，您須要返回並按照上一頁的設置說明進行操做。

若是該應用還沒有運行，請啓動該應用。 當您進行更改時，請經過從新加載瀏覽器窗口來保持運行。

顯示英雄

向AppComponent添加兩個屬性：一個title屬性表明應用程序名，一個hero屬性表明英雄名

lib/app_component.dart (AppComponent class)

class AppComponent {
  final title = 'Tour of Heroes';
  var hero = 'Windstorm';
}

如今使用綁定數據的新屬性來更新@Component註解下的模板

lib/app_component.dart (@Component)

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>',

刷新瀏覽器，頁面將顯示標題和英雄名

雙大括號是Angular插值綁定語法。 這些插值綁定將組件的標題和英雄屬性值做爲字符串顯示在HTML標題標籤內。

在「顯示數據」頁面中閱讀有關插值的更多信息。

Hero對象

英雄須要更多的屬性。 將英雄從文字字符串轉換爲類。

建立一個具備id和name屬性的Hero類。 在app_component.dart文件的頂部附近添加這些屬性，就在import語句的下面（若是有的話）。

lib/app_component.dart (Hero class)

class Hero {
  final int id;
  String name;

  Hero(this.id, this.name);
}

在AppComponent類中，將組件的英雄屬性重構爲Hero類型，而後將其id初始化爲1，name爲Windstorm。

lib/app_component.dart (hero property)

Hero hero = new Hero(1, 'Windstorm');

由於你將英雄從字符串更改成對象，請更新模板中的綁定以引用英雄的name屬性。

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>',

刷新瀏覽器，頁面將顯示英雄名

組合HTML和多行模板字符串

要顯示全部英雄的屬性，請爲英雄的id屬性添加一個<div>，併爲英雄的名稱添加另外一個<div>。 爲了保持模板的可讀性，將每一個<div>塊獨佔一行。

lib/app_component.dart (multi-line strings)

template: '''
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
''',

編輯英雄名

用戶應該能夠在<input>文本框中編輯英雄名字。 文本框應顯示英雄的名稱屬性，並根據用戶類型更新該屬性。

您須要在<input>表單元素和hero.name屬性之間進行雙向綁定。

雙向綁定

重塑模板中的英雄名稱，使其看起來像這樣：

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

[（ngModel）]是將hero.name屬性綁定到文本框的Angular語法。 數據在兩個方向流動：從屬性到文本框，從文本框返回到屬性。

在表單和模板語法頁面中閱讀有關ngModel的更多信息。

@Component（指令：...）

不幸的是，在這個變化以後，應用程序中斷！ 若是您打開瀏覽器控制檯並刷新頁面，您將看到Angular報警。 要知道爲何，看看pub serve輸出臺。 模板編譯器沒法識別ngModel，併發出AppComponent的解析錯誤：

Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list.
  [(ngModel)]="hero.name"
  ^^^^^^^^^^^^^^^^^^^^^^^

雖然NgModel是在angular_forms庫中定義的有效Angular指令，但默認狀況下不可用。

在模板中使用任何Angular指令以前，須要在組件的@Component註解的指令參數中列出它們。 您能夠逐一的添加指令，或爲了方便您能夠添加formDirectives列表（注：新的import語句）：

lib/app_component.dart (directives)

import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'my-app',
  /* . . . */
  directives: const [formDirectives],
)

angular_forms庫來源於它本身的包，將包添加到pubspec依賴項：

刷新瀏覽器，應用程序應該會再次工做。 您能夠編輯英雄的名字，並看到當即在文本框上方的<h2>中反映的更改。

你走過的路

保留你已構建的代碼

「Tour of Heroes」應用程序使用雙重大括號插值（一種單向數據綁定）來顯示Hero對象的應用程序標題和屬性。

您使用Dart的模板字符串編寫了多行模板，以使模板可讀。

您使用內置的ngModel指令向<input>元素添加了雙向數據綁定。 此綁定顯示Hero的名稱，並容許用戶更改它。

您將formDirectives添加到應用程序的@Component註解的directives參數，以便Angular知道定義了ngModel的位置。

您的應用應該看起來像這個實例（查看源代碼）。

如下列出的是完整的app_component.dart：

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
  selector: 'my-app',
  template: '''
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
  ''',
  directives: const [formDirectives],
)
class AppComponent {
  final title = 'Tour of Heroes';
  Hero hero = new Hero(1, 'Windstorm');
}
class Hero {
  final int id;
  String name;
  Hero(this.id, this.name);
}

前方的路
在下一個教程頁面中，您將搭載「Tour of Heroes」應用程序，以顯示英雄列表。 您還將容許用戶選擇英雄並顯示其詳細信息。 您將瞭解有關如何檢索列表並將其綁定到模板的更多信息。

下一節