我正在编写.todo任务管理器在Angular2..必须更新选择选项值…在localStorage

i am coding ..todo task manger in Angular2.... having to update select option value ....in localStorage

本文关键字：选择 更新 选项 localStorage Angular2 todo 任务管理器      更新时间：2023-09-26

这是我关于待办事项管理的问题。当(change)事件被触发时，我想在select selector中更新一个选项值。

有2个组件//app.component.ts 

//array object
this.dataArr[this.counter] = {id: this.task_ID, name: this.t_name, msg: this.t_msg, date: this.task_date};
//console.log(this.counter);    
console.log(this.dataArr[this.counter]);    
//local storage
if (typeof(Storage) !== "undefined") {
    localStorage.setItem("taskM", JSON.stringify(this.dataArr.reverse()));                  //put object array in reverse order to show latest object at top position
this.myObj = JSON.parse(localStorage.getItem("taskM"));
}

在这个组件中，我想更改并保存选择选项值为localStorage
//task-form.component.ts。

import { Component, OnInit, Input, Output } from '@angular/core';
import { AppComponent }    from './app.component';

@Component({
  selector: 'task-data',
  template: `<h3>List of Task</h3>
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
     <tr>
    <th>Task Id</th>
        <th>Task Title</th>
        <th>Description</th>
        <th>Date</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let hero of taskMM">
    <td> {{ hero.id }} </td>
    <td> {{ hero.name }} </td>
    <td> {{ hero.msg }} </td>
    <td> {{ hero.date }} </td>
    <td>
    <select class="form-control">
      <option *ngFor="let p of taskStatus"[value]="p">           {{p}}</option>
    </select>
    </td>
     </tr>
    </tbody>
    </table>

    </div>
  `
})
export class TaskFormComponent {
  taskStatus: string[];
  taskMM: string[] = JSON.parse(localStorage.getItem("taskM"));
  @Input('task-s') t_status: string;    
  @Input() data1: any= [];  
  onChange(deviceValue) {
    console.log(deviceValue);
  }

  ngOnInit() {
        console.log('this is ngOnInit ');
   }
  constructor() {
        this.taskStatus = ['Started', 'Pending', 'Completed'];
    }   
}

<select (change)="onChange($event.target.value)" class="form-control">
  <option *ngFor="let p of taskStatus"[value]="p">           {{p}}</option>
</select>
onChange($event) {
    localStorage.setItem("taskM", $event); 
}
相关文章：