使用Angular创建杂货清单管理器：管理物品

在本 angular 教程系列的第一部分中，您了解了如何开始使用 Angular 创建杂货清单管理器。您学习了如何为 Grocery 组件创建视图、将项目添加到购物清单并显示添加的项目。

在本部分中，您将实现标记已完成项目、编辑现有项目和删除添加项目的功能。

入门

让我们首先从教程的第一部分克隆源代码。在您的终端中，编写以下代码以克隆源代码：

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

克隆源代码后，导航到项目文件夹并安装require d 依赖项。

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文件的外观：

<div> 
    <h2> 杂货清单管理器 </h2> 
    <div class="row">
        <div class="col-xs-6 col-md-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="enter grocery items" [(ngModel)]="task.name" />
                <div class="input-group-btn">
                    <button class="btn btn-primary" type="button" (click)="onClick()">
    					<span class="glyphicon glyphicon-ok"></span>
					</button
                    >
                </div>
            </div>
            <ul class="list-group">
                <li *ngFor="let task of tasks" class="list-group-item">
                    <span> {{ task.name }} </span>
                    <span class="glyphicon glyphicon-remove floatright paddingLeft"></span>
                    <span (click)="onEdit(task)" class="glyphicon glyphicon-pencil floatright"></span>
                </li>
            </ul>
        </div>
    </div>
</div>

将点击事件添加到删除图标以删除杂货项目。

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

保存更改并重新启动服务器。尝试将新项目添加到杂货店经理应用程序，您将列出这些项目以及删除和编辑图标。

要实现删除功能，您需要 onDelete在文件中添加方法，app.grocery.ts如下所示：

onDelete(item){ 
    // 删除功能将在这里}

用户单击删除图标后，您需要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 
	}; 
  }

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

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

在项目上包含一个点击事件以切换strike项目变量中的变量。您将根据变量strike的布尔值将该类应用于项目。strike默认情况下，它将是错误的。这是 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>

如所见，如果值为，您已使用ngClass指令将类strike应用于 span 元素。task.striketrue

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

最后：

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