Question

这是关于待办事项任务管理的问题。我想在触发（更改）事件时更新选择选择器中的选项值。

有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'];

    }   

}

Answer 1

<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); 
}

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

1 个答案: