シンプルな角度アプリを行う-第2部

にprevious post , 我々はシンプルなto doアプリを構築し始めたし、我々はコンソールに入力要素からデータをログ出力することができた.
ボタンをクリックすると、コンソールにユーザー入力の値が表示されます.

この投稿では次のように行います.

要素の一覧を格納する配列を作成する

入力要素からデータを保存＆表示する

リストから項目を削除する機能を追加

要素の一覧を格納する配列を作成する
我々は、アイテムのリストを表示するには、アプリケーションにいくつかのコードを追加する必要があります.
テンプレートファイル、アプリから始めましょう.コンポーネント.HTML .
すぐにフォームの下に次のコードを追加します.

// app.component.html

...

<ul>
  <li *ngFor="let item of todoList">{{ item }}</li>
</ul>

私はあなたがよく知っていると仮定している <ul> and <li> tags .
もっとおもしろいことはngFor もの.あなたがそれに慣れていないならば、このように* ngfor構文を読んでください<li> そして、新しく作成されたアイテムにその項目を加えます<li> .
Toolistはどこですか?我々はまだそれを持っていない.しかし、名前が示すように、Toolistアイテムのリストが含まれます.その後、入力要素からデータをtodolistに追加します.todolistをappcomponentに呼び出す配列を定義しましょう.

// app.component.ts

...
export class AppComponent {
  title: string = 'Ng To Do';
  subtitle: string = 'Write something to do in the form';
  userInput: string | undefined;
  todoList: string[] = ['Study Angular', 'Add one elememt', 'Correct typo'];

  onSubmit(): void {
    console.log(this.userInput);
  }
}

トドストのタイプはstring[] はスクリプトで、文字列の配列として読むことができます.

入力要素からデータを保存＆表示する
OnSubmit ()メソッドを使用して、ユーザ入力をtodolistに追加します.

// app.component.ts

...
onSubmit(): void {
    console.log(this.userInput);
    this.todoList = this.todoList.concat(this.userInput);
  }

あなたはpush() の代わりにconcat() しかし、私はAに従うほうを好むfunctional programming パターン.この運動の目的のためにどちらかよい.
今、あなたは、アイテムがあなたのアプリケーションの入力要素をフロート来るを見ることができます!


リストから項目を削除する
私たちは残酷にアイテムを削除します.
まず第一に、我々はonDelete() メソッドをアプリケーション.コンポーネント.TSonDelete() タイプ文字列の1つのパラメータをとります.
次に、JavaScriptを使用しますfilter() メソッドと機能的なプログラミングパターンは、ユーザーがいくつかの項目を削除することを決定した後に残されたアイテムだけを含むToolistのコピーを作成する.

// app.component.ts

...
  onDelete(itemToDelete: string): void {
    this.todoList = this.todoList.filter((item) => item !== itemToDelete);
  }

最後に、魔法を起こすために、テンプレートにいくつかのコードを追加する必要があります.前にしたように、イベントバインディングを使用します(click)="onDelete(item)" .

// app.component.html

...

<ul>
  <li *ngFor="let item of todoList" (click)="onDelete(item)" 
   {{ item }}
  </li>
</ul>

これはちょっと仕事です.
今、あなたはそれらをクリックして項目を削除することができます.言い換えると、テキストをクリックしてonDelete() 削除する項目をフィルタアウトするJavaScriptコードを実行するメソッドです.
あなたはコードを見つけることができますhere .

新しい始まり
アプリは動作しているが、それは間違いなくコードの生の作品です.アクセシビリティは悪いですが、同じテキストを持つアイテムが一緒に削除され、スタイル….まあ、あなたはそれを参照してください.
しかし、多くの方法が進行するので、私はプッシュが必要です😄
では、いくつかのオプションがあります.

このくだらないスタイルにいくつかのCSSを追加

アクセシビリティ向上

機能を改善:ワンクリック、1つの削除

入力に妥当性検査を追加する

適切な角度のフォームを使用して、このアプリを書き直す

コメントにあなたの好みを書いてください.また、何か別の提案することができます!