增強基於 Angular 的雜貨清單管理器中的專案管理：第 2 部分

在本 Angular 教學系列的第一部分中，您了解如何開始使用 Angular 建立雜貨清單管理器。您學習如何建立雜貨組件的視圖、將商品新增至雜貨清單並顯示新增的商品。

在這一部分中，您將實作標記已完成項目、編輯現有項目和刪除新增項目的功能。

開始使用

讓我們開始複製本教學第一部分的原始程式碼。在您的終端機中，寫入以下程式碼以克隆原始程式碼：

git clone https://github.com/royagasthyan/AngularGrocery

克隆原始程式碼後，導覽至專案資料夾並安裝所需的依賴項。

cd AngularGrocery
npm install

安裝依賴項後，您將能夠啟動伺服器。從專案資料夾中，輸入以下命令：

ng serve

將瀏覽器指向 http://localhost:4200/，應用程式應該正在執行。

更新雜貨商品

將雜貨商品新增至清單後，您應該能夠編輯和更新這些商品。讓我們在清單網格中提供一個編輯按鈕，點擊該按鈕將啟用對現有項目的編輯。

修改 app.grocery.html 程式碼以在網格內包含編輯按鈕。

<span class="glyphicon glyphicon-pencil floatright"></span>

儲存以上變更並重新啟動伺服器。載入頁面並輸入一些項目，您將看到每個項目的編輯按鈕。

當使用者點擊編輯按鈕時，您需要新增一個 on click 方法來處理專案編輯。修改 app.grocery.html 新增用於編輯專案的點擊事件。

<span (click)="onEdit(task)" class="glyphicon glyphicon-pencil floatright"></span>

將 task 傳遞給 onEdit 方法（如上面程式碼所示）來識別要編輯的項目。

在 GroceryComponent 類別中初始化 task 範圍變量，如下所示：

task = {
    name: '',
	id: 0
  };

在 onClick 方法中，您將檢查 id 以查看它是現有專案還是新專案。修改 onClick 方法，如下：

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

如圖所示，您已為每個任務分配了一個唯一的時間戳，即 id。現在讓我們定義 onEdit 方法來編輯現有項目。在 onEdit 方法中，將傳入的 item 賦值給 task 變數。

onEdit(item){
    this.task = item;
}

儲存變更並重新啟動伺服器。在購物清單中輸入新商品，然後按一下對應的編輯按鈕。您可以透過點擊 OK 按鈕來編輯和更新該條目。

刪除雜貨商品

讓我們新增一個刪除圖示來刪除現有的項目。更新 app.grocery.html 文件，修改 HTML 程式碼，如下所示：

<span class="glyphicon glyphicon-remove floatright paddingLeft"></span>

以下是完整的 app.grocery.html 檔案的外觀：

    
 Grocery list manager 

    

        

            

                
                

                    
    					
					
                
            
            

                

                     {{ task.name }} 
                    <span class="glyphicon glyphicon-remove floatright paddingLeft"></span>
                    <span (click)="onEdit(task)" class="glyphicon glyphicon-pencil floatright"></span>
                
            
        
    

向刪除圖示新增點擊事件以刪除雜貨。

<span (click)="onDelete(task)" class="glyphicon glyphicon-remove floatright paddingLeft"></span>

儲存變更並重新啟動伺服器。嘗試在雜貨管理應用程式中新增商品，您將看到這些商品以及刪除和編輯圖示。

要實作刪除功能，需要在onDelete 方法= "inline">app.grocery.ts 檔案如圖：

onDelete(item){
    // Delete functionality will be here
}

使用者點擊刪除圖示後，您需要根據雜貨項目清單檢查項目 id 並從 tasks 清單中刪除該條目。以下是 onDelete 方法的外觀：

onDelete(item){
    for(var i = 0;i < this.tasks.length; i++){
    	if(item.id == this.tasks[i].id){
    		this.tasks.splice(i,1);
    		break;
    	}
    }
}

如上面的程式碼所示，您已經迭代了 tasks 列表，並根據點擊的項目 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中文網其他相關文章！