Améliorer la gestion de projet dans le gestionnaire de listes d'épicerie basé sur Angular : partie 2

Dans la première partie de cette série de didacticiels Angular, vous avez appris comment commencer à créer un gestionnaire de listes de courses à l'aide d'Angular. Vous avez appris à créer une vue du composant Épicerie, à ajouter des articles à une liste d'épicerie et à afficher les articles ajoutés.

Dans cette partie, vous implémenterez la fonctionnalité de marquage des projets terminés, de modification des projets existants et de suppression des projets ajoutés.

Commencer

Commençons par cloner le code source de la première partie de ce tutoriel. Dans votre terminal, écrivez le code suivant pour cloner le code source :

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

Après avoir cloné le code source, accédez au dossier du projet et installez les dépendances requises.

cd AngularGrocery
npm install

Après avoir installé les dépendances, vous pourrez démarrer le serveur. Depuis le dossier du projet, entrez la commande suivante :

ng serve

Pointez votre navigateur sur http://localhost:4200/ et l'application devrait être en cours d'exécution.

Articles d'épicerie mis à jour

Après avoir ajouté des produits d'épicerie à votre liste, vous devriez pouvoir les modifier et les mettre à jour. Fournissons un bouton d'édition dans la grille de liste, qui, une fois cliqué, permettra de modifier les éléments existants.

Modifiez app.grocery.html le code pour inclure les boutons d'édition dans la grille.

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

Enregistrez les modifications ci-dessus et redémarrez le serveur. Chargez la page et entrez quelques éléments, vous verrez des boutons d'édition pour chaque élément.

Vous devez ajouter une méthode au clic pour gérer l'édition des éléments lorsque l'utilisateur clique sur le bouton d'édition. Modification app.grocery.html Ajouter un événement de clic pour modifier les éléments.

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

Intégrez la méthode task 传递给 onEdit (comme indiqué dans le code ci-dessus) pour identifier l'élément à modifier.

Dans la variable GroceryComponent 类中初始化 task scope, comme ceci :

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

Dans la méthode onClick 方法中，您将检查 id 以查看它是现有项目还是新项目。修改 onClick, cela ressemble à ceci :

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

Comme le montre l'image, vous avez attribué à chaque tâche un horodatage unique, qui est la variable id。现在让我们定义 onEdit 方法来编辑现有项目。在 onEdit 方法中，将传入的 item 赋值给 task.

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

Enregistrez les modifications et redémarrez le serveur. Entrez de nouveaux articles dans votre liste de courses et cliquez sur le bouton d'édition correspondant. Vous pouvez modifier et mettre à jour cette entrée en cliquant sur le bouton OK.

Supprimer des articles d'épicerie

Ajoutons une icône de suppression pour supprimer les éléments existants. Mettez à jour le fichier app.grocery.html et modifiez le code HTML comme suit :

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

Voici à quoi ressemble le dossier app.grocery.html complet :

    
 Grocery list manager 

    

        

            

                
                

                    
    					
					
                
            
            

                

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

Ajoutez un événement de clic pour supprimer l'icône pour supprimer les courses.

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

Enregistrez les modifications et redémarrez le serveur. Essayez d'ajouter de nouveaux articles à l'application de gestion d'épicerie et vous verrez ces éléments ainsi que des icônes de suppression et de modification.

Pour mettre en œuvre la fonction de suppression, vous devez onDelete 方法= "inline">app.grocery.ts déposer comme indiqué :

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

Une fois que l'utilisateur clique sur l'icône de suppression, vous devez vérifier l'article par rapport à la liste des articles d'épicerie id 并从 tasks 列表中删除该条目。以下是 onDelete À quoi ressemble la méthode :

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

Comme le montre le code ci-dessus, vous avez parcouru la méthode tasks 列表，并根据单击的项目 id 对其进行了检查。如果它与 tasks 列表中的项目匹配，则使用 splice pour la supprimer.

Enregistrez les modifications ci-dessus et redémarrez le serveur. Ajoutez quelques articles au gestionnaire de liste d'épicerie. Il sera ajouté à la grille de la liste des tâches avec les icônes de suppression et de modification. Essayez de cliquer sur l'icône de suppression et l'élément sera supprimé de la liste des éléments.

Marquer les courses comme terminées

Ajoutons la possibilité de supprimer les éléments ajoutés à la liste. Une fois que l'utilisateur a terminé une tâche dans le gestionnaire de listes de courses, il devrait être possible de supprimer la tâche terminée. Pour suivre les tâches nouvelles et terminées, ajoutez une nouvelle variable strike aux informations sur la tâche.

Modifiez la méthode onClick pour inclure la nouvelle variable onClick 方法以包含新的 strike comme suit :

  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 上找到。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!