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 方法= "inline">app.grocery.ts해야 합니다.

으아악

사용자가 삭제 아이콘을 클릭한 후 식료품 목록과 비교하여 해당 항목을 확인해야 합니다. id 并从 tasks 列表中删除该条目。以下是 onDelete 방법은 다음과 같습니다:

으아악

위 코드에 표시된 것처럼 tasks 列表，并根据单击的项目 id 对其进行了检查。如果它与 tasks 列表中的项目匹配，则使用 splice 메서드를 반복하여 제거했습니다.

위 변경 사항을 저장하고 서버를 다시 시작하세요. 식료품 목록 관리자에 일부 항목을 추가합니다. 삭제 및 편집 아이콘과 함께 작업 목록 그리드에 추가됩니다. 삭제 아이콘을 클릭하면 해당 항목이 항목 목록에서 제거됩니다.

식료품을 완료된 것으로 표시

목록에 추가된 항목을 삭제하는 기능을 추가해 보겠습니다. 사용자가 쇼핑 목록 관리자에서 작업을 완료하면 완료된 작업을 삭제할 수 있어야 합니다. 새 작업과 완료된 작업을 추적하려면 작업 정보에 새 변수 strike를 추가하세요.

새 onClick 方法以包含新的 strike 변수를 포함하도록 onClick 메서드를 다음과 같이 수정하세요.

  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!