【Angular】TodoList kleines Projekt (Open Source)

Weitere Informationen:https://segmentfault.com/a/1190000013519099

Artikelverzeichnis

Wirkung:

Fügen Sie hier eine Bildbeschreibung ein

Vorbereitung

Projekt erstellen:ng new my-app

Navigieren Sie zum Arbeitsbereichsordner:cd my-app

Starten Sie dieses Projekt:ng serve --open

Komponente erstellen:ng generate component component/todoList

Der Pfad zur Komponente lautet:
Fügen Sie hier eine Bildbeschreibung ein

Nachdem Sie die Komponente erstellt haben, konfigurieren Sie sie in der Stammkomponente (app.module.ts):

Fügen Sie hier eine Bildbeschreibung ein
Laut TS-Dateitodo-list.component.ts lautet der Name der von uns erstellten todoList-Komponente: app-todo-list. Führen Sie die Komponente auf der Hauptseite ein (app.component.html), starten Sie den Dienst und werfen Sie einen Blick darauf. Erfolg! Zu diesem Zeitpunkt wissen wir bereits, wie Komponenten erstellt und referenziert werden.

Fügen Sie hier eine Bildbeschreibung ein
Beginnen Sie als Nächstes mit dem Schreiben von TodoList!

Header

Wirkung:

Fügen Sie hier eine Bildbeschreibung ein

<!-- todo-list.component.html -->
<header>
    <section>
        <label for="title">TodoList</label>
        <input type="text" placeholder="添加ToDo">
    </section>
</header>

/* todo-list.component.css */
header {
    
    
    height: 70px;
    background-color: #333;
}

header section{
    
    
    display: flex;
    justify-content: space-between;
}

section {
    
    
    margin: 0 auto;
    width: 70vw;
    
}

header section label {
    
    
    font-size: 28px;
    color: #fff;
    line-height: 70px;
}

header section input {
    
    
    width: 35%;
    margin: 10px 0;
    padding-left: 15px;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
}

Todo、Doing、Done

Stil (HTML+CSS)

Der Effekt ist ungefähr so:

Fügen Sie hier eine Bildbeschreibung ein
ein paar Details

Kontrollkästchen am Text ausgerichtet

Referenz:CSS-Kontrollkästchen und Textausrichtung – CSDN-Blog
Fügen Sie hier eine Bildbeschreibung ein

.item .listItem input[type=checkbox] {
    
    
    width: 23px;
    height: 23px;
    /* 复选框与文字对齐 */
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 2px;
}

Legen Sie einen Schatten für das Element „Fertig“ fest

Platzieren Sie eine Maskenebene außerhalb des Objekts und stellen Sie den Hintergrund auf Schwarz ein. Legen Sie einfach die Deckkraft des Elements fest.

Referenz:css fügt dem Bild eine Maskenebene hinzu._css fügt dem Bild eine Maskenebene hinzu-CSDN-Blog

<div class="item done">
    <h2>Done</h2>
    <div class="list">
        <!-- 外面的阴影 -->
        <div class="mask">
            <div class="listItem">
                <input type="checkbox">吃饭3
            </div>        
        </div>
    </div>
</div>

.done .listItem {
    
    
    box-shadow: -5px 0 0 0 #999999;
    opacity: 0.7;
}

.done .mask {
    
    
    background: #000;
}

endgültiger Code

<!-- todo-list.component.html -->
<header>
    <section>
        <label for="title">TodoList</label>
        <input type="text" placeholder="添加ToDo">
    </section>
</header>

<section>
    <div class="item todo">
        <h2>Todo</h2>
        <div class="list">
            <div class="listItem">
                <input type="checkbox">吃饭1
            </div>
            <div class="listItem">
                <input type="checkbox">睡觉1
            </div>
            <div class="listItem">
                <input type="checkbox">喝水1
            </div>
        </div>
    </div>
    <div class="item doing">
        <h2>Doing</h2>
        <div class="list">
            <div class="listItem">
                <input type="checkbox">吃饭2
            </div>
            <div class="listItem">
                <input type="checkbox">睡觉2
            </div>
            <div class="listItem">
                <input type="checkbox">喝水2
            </div>
        </div>
    </div>
    <div class="item done">
        <h2>Done</h2>
        <div class="list">
            <!-- 外面的阴影 -->
            <div class="mask">
                <div class="listItem">
                    <input type="checkbox" checked="checked">吃饭3
                </div>        
            </div>
        </div>
    </div>
</section>

/* todo-list.component.css */
header {
    
    
    height: 70px;
    background-color: #333;
}

header section {
    
    
    display: flex;
    justify-content: space-between;
}

section {
    
    
    margin: 0 auto;
    width: 70vw;

}

header section label {
    
    
    font-size: 28px;
    color: #fff;
    line-height: 70px;
}

header section input {
    
    
    width: 35%;
    margin: 10px 0;
    padding-left: 15px;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
}

.item {
    
    
    margin: 20px 0;
}

.item h2 {
    
    
    color: #000;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.item .listItem {
    
    
    background-color: #dbdbdb;
    margin: 15px 0;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}

.todo .listItem {
    
    
    box-shadow: -5px 0 0 0 #ede719;
}

.doing .listItem {
    
    
    box-shadow: -5px 0 0 0 yellowgreen;
}

.done .listItem {
    
    
    box-shadow: -5px 0 0 0 #999999;
    opacity: 0.7;
}

.done .mask {
    
    
    background: #000;
}


.item .listItem input[type=checkbox] {
    
    
    width: 23px;
    height: 23px;
    /* 复选框与文字对齐 */
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 2px;
}

Funktion(TS)

Den Inhalt des Eingabefelds zu todoList hinzufügen (addTodo)

Definieren Sie die Daten und schreiben Sie die addTodo-Methode.

//todo-list.component.ts
export class TodoListComponent {
    
    
    public todo: any = '' //在input栏，即将加入todoList
    public todoList = [] as any;
    public doingList = [] as any;
    public doneList = [] as any;


	// 添加代办时间到todo
    addTodo(e: any) {
    
    
	    // 回车
	    if (e.keyCode == 13) {
    
    
	        this.todoList.push(this.todo)
	        this.todo = ''
	    }
    }
}

Binden Sie Daten und Zeit in HTML:

Eingabefeld:

<!-- todo-list.component.html -->
<header>
    <section>
        <label for="title">TodoList</label>
        <input type="text" (keydown)="addTodo($event)" [(ngModel)]='todo' placeholder="添加ToDo">
    </section>
</header>

Aufgabenliste:

<div class="item todo">
    <h2>Todo</h2>
    <div class="list">
        <div class="listItem" *ngFor="let item of todoList">
            <input type="checkbox">{
   
   {item.todo}}
        </div>
    </div>
</div>

Aufgetretene Probleme und Lösungen:

AddTodo-Methode schreiben:
TypeScript-Fehlereigenschaft existiert nicht für Typobjekt – Nuggets (juejin.cn)
Parameter „xxx“ hat implizit Lösung zu einem „beliebigen“ Typ_hat implizit einen „beliebigen“ Typ-CSDN-Blog

In binding [(ngModel)]='todo':Angular-Fehler lösen Kann nicht an „ngModel“ gebunden werden, da es sich nicht um eine bekannte Eigenschaft von „input“ handelt – CSDN-Blog

Push todoObj into todoList:Parameter vom Typ „{ name: any; value: string; }“ können nicht Parametern vom Typ „never“ zugewiesen werden. _Parameter vom Typ „any“ können nicht Parametern vom Typ „never“ zugewiesen werden_Der Blog von „Ich bin damit fertig – CSDN-Blog“

Ändern Sie das ToDo-Ereignis in Doing

Funktion: Wenn ToDo überprüft wird (Klickereignis), wird es zur DoingList hinzugefügt. tun, um zu tun, getan, um zu tun, und so weiter.

// todo 改为doing
todoChange(key: any) {
    
    
    this.doingList.push(this.todoList[key])
    this.todoList.splice(key,1)
}

<div class="item todo">
    <h2>Todo</h2>
    <div class="list">
        <div class="listItem" *ngFor="let item of todoList;let key=index">
            <input type="checkbox" (click)="todoChange(key)">{
   
   {item}}
        </div>
    </div>
</div>

Aktualisieren Sie es und stellen Sie fest, dass die Daten auf der Seite verschwunden sind. Wenn wir Seitendaten speichern möchten, müssen wir Folgendes tun.

Aufschlag

Referenz:angularcli Kapitel 7 (Service Service) – Meow~ – Blog Park (cnblogs.com)

Erstellen Sie einen Dienst in der Konsole:

ng g service services/storage

app.module.tsStellen Sie den erstellten Dienst vor in:

Fügen Sie hier eine Bildbeschreibung ein

Führen Sie den Dienst ein und fügen Sie ihn in die Seite ein, die Sie verwenden möchten:

Fügen Sie hier eine Bildbeschreibung ein
Spezifische Dienstleistungen:

Möglicher Fehler:ts-Fehler: Der Parameter vom Typ „string | null“ kann nicht dem Parameter vom Typ „string“ zugewiesen werden. Der Typ „null“ kann dem Typ „string“ nicht zugewiesen werden. -CSDN-Blog

// storage.service.ts
import {
    
     Injectable } from '@angular/core';

@Injectable({
    
    
  providedIn: 'root',
})
export class StorageService {
    
    
  constructor() {
    
    }

  setItem(key: any, value: any) {
    
    
    localStorage.setItem(key, JSON.stringify(value));
  }
  getItem(key: any) {
    
    
    try {
    
    
      return JSON.parse(localStorage.getItem(key) || '');
    } catch (Error) {
    
    
      console.log(Error);
    }
  }
}

Fügen Sie den entsprechenden this.storage.setItem('xx',this.xx) unter jedem Code hinzu, der todoList, doingList und doneList ändert, um die Daten lokal zu speichern.

// 添加代办时间到todo
addTodo(e: any) {
    
    
    // 回车
    if (e.keyCode == 13) {
    
    
        this.todoList.push(this.todo)
        this.todo = ''
        this.storage.setItem('todoList',this.todoList)
    }
}

// todo 改为doing
todoChange(key: any) {
    
    
    this.doingList.push(this.todoList[key])
    this.todoList.splice(key,1)
    this.storage.setItem('todoList',this.todoList)
    this.storage.setItem('doingList',this.doingList)
}

// doing 改为done
doingChange(key: any) {
    
    
    this.doneList.push(this.doingList[key])
    this.doingList.splice(key,1)
    this.storage.setItem('doneList',this.doneList)
    this.storage.setItem('doingList',this.doingList)
}

// done 改为todo
doneChange(key: any) {
    
    
    this.todoList.push(this.doneList[key])
    this.doneList.splice(key,1)
    this.storage.setItem('todoList',this.todoList)
    this.storage.setItem('doneList',this.doneList)
}

Du bist fertig!

Referenz

Angular – Einführung in die Angular-Dokumentation

anglejs – Begleiten Sie mich in der Grube und beginnen Sie mit Angular, Angular-Version von ToDoList – Persönlicher Artikel – SegmentFault Sifu

CSS-Kontrollkästchen und Textausrichtung – CSDN-Blog

box-shadow legt einseitige und mehrseitige Schatten fest – Nuggets (juejin.cn)

CSS fügt dem Bild eine Maskenebene hinzu._CSS fügt dem Bild eine Maskenebene hinzu. CSDN-Blog

js-Tastaturüberwachung (Wagenrücklauf)_js-Tastaturüberwachung und Wagenrücklauf-CSDN-Blog

Die TypeScript-Fehlereigenschaft ist für den Typ Object – Nuggets (juejin.cn) nicht vorhanden.

Lösung für Parameter „xxx“ hat implizit einen Typ „beliebig“_hat implizit einen Typ „beliebig“ – CSDN-Blog

anglecli Kapitel 7 (Dienstleistung) – Meow~ – Blog Park (cnblogs.com)

ts-Fehler: Der Parameter vom Typ „string | null“ kann nicht dem Parameter vom Typ „string“ zugewiesen werden. Der Typ „null“ kann dem Typ „string“ nicht zugewiesen werden. -CSDN-Blog

Open Source

https://gitee.com/karshey/angular-todo-list

Spätere Ergänzungen

Dieses kleine Projekt ist ein Übungsprojekt für Neulinge und der Text ist voller Lücken. Zu den Sicherheitslücken gehören unter anderem: kein benutzerdefinierter Todo-Typ, sondern direkte Verwendung von Zeichenfolgen, keine JSON.parse-Ausnahmebehandlung, keine Unit-Tests ...
Mit Vorsicht lesen!