Angular ベースの食料品リスト マネージャーでのプロジェクト管理の強化: パート 2

この Angular チュートリアル シリーズの最初の部分では、Angular を使用して食料品リスト マネージャーの作成を開始する方法を学びました。食料品コンポーネントのビューを作成し、食料品リストに品目を追加し、追加された品目を表示する方法を学習しました。

このセクションでは、完了したプロジェクトのマーク付け、既存のプロジェクトの編集、追加したプロジェクトの削除の機能を実装します。

使い始める

このチュートリアルの最初の部分のソース コードを複製することから始めましょう。ターミナルで次のコードを記述してソース コードのクローンを作成します:

リーリー

ソース コードを複製した後、プロジェクト フォルダーに移動し、必要な依存関係をインストールします。

リーリー

依存関係をインストールした後、サーバーを起動できるようになります。プロジェクト フォルダーから次のコマンドを入力します:

リーリー

ブラウザで http://localhost:4200/ を指定すると、アプリケーションが実行されるはずです。

食料品の更新

食料品をリストに追加した後、それらを編集および更新できるようになります。リスト グリッドに編集ボタンを設けてみましょう。このボタンをクリックすると、既存の項目を編集できるようになります。

app.grocery.html コードを変更して、グリッド内に編集ボタンを含めます。

リーリー

上記の変更を保存し、サーバーを再起動します。ページをロードしていくつかの項目を入力すると、各項目の編集ボタンが表示されます。

ユーザーが編集ボタンをクリックしたときに項目の編集を処理するには、クリック時メソッドを追加する必要があります。 app.grocery.html を変更して、項目を編集するためのクリック イベントを追加します。

リーリー

task を onEdit メソッドに渡して (上記のコードに示すように)、編集する項目を識別します。

次のように、GroceryComponent クラスの task スコープ変数を初期化します。 リーリー

onClick メソッドでは、id をチェックして、それが既存の項目であるか新しい項目であるかを確認します。 onClick メソッドを次のように変更します: リーリー

図に示すように、各タスクに

id という一意のタイムスタンプを割り当てました。次に、既存の項目を編集するための onEdit メソッドを定義しましょう。 onEdit メソッドで、受信した item を task 変数に割り当てます。 リーリー

変更を保存し、サーバーを再起動します。ショッピング リストに新しい商品を入力し、対応する編集ボタンをクリックします。 [

OK] ボタンをクリックすると、このエントリを編集および更新できます。

食料品の削除

既存の項目を削除するための削除アイコンを追加しましょう。

app.grocery.html ファイルを更新し、HTML コードを次のように変更します。 リーリー 完全な

app.grocery.html

ファイルは次のようになります: リーリー 食料品を削除するアイコンを削除するためのクリック イベントを追加します。

リーリー

変更を保存し、サーバーを再起動します。食料品管理アプリに新しいアイテムを追加してみると、削除アイコンと編集アイコンとともにこれらのアイテムが表示されます。

削除関数を実装するには、次のように onDelete<p> method = "inline">app.grocery.ts<code class="中添加"> を追加する必要があります。ファイル内: リーリー

ユーザーが削除アイコンをクリックした後、食料品のリストに対して項目

id

をチェックし、タスク リストからエントリを削除する必要があります。 onDelete メソッドは次のようになります: リーリー 上記のコードに示すように、

タスク

リストを反復処理し、クリックされた項目 id に基づいてチェックしました。 tasks リスト内の項目と一致する場合は、splice メソッドを使用して削除します。 上記の変更を保存し、サーバーを再起動します。食料品リストマネージャーにいくつかのアイテムを追加します。これは、削除アイコンおよび編集アイコンとともにタスク リスト グリッドに追加されます。削除アイコンをクリックしてみると、項目が項目リストから削除されます。

食料品を完了としてマークする

リストに追加された項目を削除する機能を追加しましょう。ユーザーがショッピング リスト マネージャーでタスクを完了すると、完了したタスクを削除できる必要があります。新しいタスクと完了したタスクを追跡するには、新しい変数

strike

をタスク情報に追加します。

onClick

メソッドを変更して、次のように新しい strike 変数を含めます。

  onClick(){
    if(this.task.id == 0){
		this.tasks.push({id: (new Date()).getTime(),name: this.task.name, strike: false});
	}
	
  	this.task = {
		name: '',
		id: 0
	};
  }

在 src/style.css 文件中添加一个名为 strike 的新类，该类将删除该项目。

.strike{
    text-decoration:line-through;
}

在项目上包含单击事件，以切换 items 变量中的 strike 变量。您将根据 strike 变量的布尔值将 strike 类应用于项目。默认情况下，它将为 false。以下是用于切换罢工变量值的 onStrike 方法：

onStrike(item){
  for(var i = 0;i < this.tasks.length; i++){
    if(item.id == this.tasks[i].id){
      if(this.tasks[i].strike){
        this.tasks[i].strike = false;
      }
      else{
        this.tasks[i].strike = true;
      }
      break;
    }
  }
}

如上面的方法所示，您将迭代项目列表。找到该项目后，您可以切换罢工值。

基于 strike 变量，您需要将类 strike 应用到任务名称范围。其外观如下：

<span (click)="onStrike(task)" [ngClass]="{'strike': task.strike}"> {{ task.name }} </span>

如图所示，如果 task.strike 值为 ngClass 指令将类 strike 应用于 span 元素class="inline">true。

保存以上更改并重新启动服务器。将项目添加到列表中，然后单击添加的项目。单击后，该项目将按预期被删除。

总结

在本教程中，您了解了如何使用 Angular 在杂货店管理应用中更新、删除任务并将任务标记为完成。我希望您喜欢本教程。请在下面的评论中告诉我您的想法。

JavaScript 已成为事实上的网络工作语言之一。它并非没有学习曲线，而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

哦，不要忘记本教程的源代码可以在 GitHub 上找到。

以上がAngular ベースの食料品リスト マネージャーでのプロジェクト管理の強化: パート 2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。