私はコーディングしています。角度2のタスクマネージャー。....選択したオプションの値を更新する必要があります....ローカルストア

Question

ここに私のタスク管理に関する問題があります。 （変更）イベントが発生したときに、選択セレクタのオプション値を更新したいとします。

2コンポーネント //app.component.ts私はlocalStorage
//task-form.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")); 
} 

があります。

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