javascript - 如何将文本字段中的输入保存到本地存储中，然后在 Angular 中单击按钮后在列中显示项目

Question

展示

我如何将用户输入存储到待办事项数组中，然后存储到本地存储中，然后显示到待办事项列中。如何将文本字段中的输入保存到本地存储中，然后在 Angular 中单击按钮后在列中显示项目。

模板：

<div cdkDropListGroup>
  <div class="example-container">
    <h2>TO DO</h2>

    <div
      cdkDropList
      [cdkDropListData]="todo"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>IN PROGRESS</h2>

    <div
      cdkDropList
      [cdkDropListData]="inprogress"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of inprogress" cdkDrag>{{item}}</div>
    </div>
  </div>


  <div class="example-container">
    <h2>DONE</h2>

    <div
      cdkDropList
      [cdkDropListData]="done"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

    <form >
      <mat-form-field class="example-full-width">
        <mat-label>New task</mat-label>
        <input
          matInput placeholder="Ex. Check email"
          *ngFor="let item of todo">
      </mat-form-field>
      
      <button mat-mini-fab color="primary" (Click)="onAdd()">+</button>

drag and drop columns from Angular material UI in template.

ts file:

export class AppComponent {
  title = 'task-board';
  


  todo = ['new task'];

  inprogress = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];


  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }

我如何添加正确的逻辑来存储和显示到待办事项中。

标签： javascripthtmlangulartypescriptinput