增强基于 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 文件的外观：

<div>
    <h2> Grocery list manager </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 方法= "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中文网其它相关文章！