时间戳

首页 > 解决方案 > 当使用服务将数据从一个组件传输到另一个组件时，如何正确更新数据？

angular - 当使用服务将数据从一个组件传输到另一个组件时，如何正确更新数据？

问题描述

我正在将数据从 X 组件传输到 Angular 中的 Y 组件（顺便说一下，我是 Angular 的新手）显示数据运行良好并且各种情况，现在问题出在我编辑/更新该信息时

我已经尝试过调整这些功能，但似乎我的数据绑定是错误的。

<pre>{{tasklist | json}}</pre> >> //file that is coming from the service
// this is showing properly


<form (ngSubmit) = "updateTask(tasklist)">
    <mat-form-field>
        <mat-select placeholder="Choose Project"  name="projectlist">
            <mat-option value="{{prjlist.projectname}}" *ngFor="let prjlist of prjlist">{{prjlist.projectname}}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Target"  name="objectivelist">
            <mat-option value="{{objlist.objectivedescription}}" *ngFor="let objlist of objlist">{{objlist.objectivedescription}}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Goal"  name="krslist">
            <mat-option value="{{krlist.keyresultname}}" *ngFor ="let krlist of krlist">{{krlist.keyresultname}}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="inputlong">
        <input matInput placeholder="Task"  name="task" value="{{tasklist.taskname}}">
    </mat-form-field>
    <mat-form-field>
        <mat-select placeholder="Assign To" name="Userlist" >
            <mat-option value="{{userslist.firstname}} {{userslist.lastname}} ({{userslist.email}})" *ngFor = "let userslist of userslist">{{userslist.firstname}} {{userslist.lastname}} ({{userslist.email}})</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a deadline"  name="datepicker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <button class="btn" mat-button>Update</button>
</form>






export class TaskEditComponent implements OnInit {
    //hold services
    tasklist='';

    constructor(//import all services here so that it can show the data in the component of add task
        private taskServices: TaskService, 
        private objsServices : ObjectivesService,
        private prjServices:ProjectsService,
        private userServices:UsersService,
        private krsServices:KrsService,
        private editServices:EdittaskService
    ) { }

    //populate the dropdown menus
    prjlist : prjmodels[];
    objlist : objsmodel[];
    krlist:krsmodel[];
    userslist:usersmdl[]; 
    listtask : taskdb[];

    editedtask :  taskdb ={

    taskname: '',
    status:1,
    aging:false, 
    assignfrom: '',
    assignto: '',
    deadline: '',
    project: '',
    objective: '',
    keyresults: '',

}



    ngOnInit() {

        this.objsServices.getobjs().subscribe(objsobs =>{
          console.log(objsobs);
          this.objlist=objsobs;

        });

        this.prjServices.getprojects().subscribe(prjobs =>{
          console.log(prjobs);
          this.prjlist = prjobs;

        });

        this.userServices.getUsers().subscribe(userobs =>{
          console.log(userobs);
          this.userslist=userobs;
        });

        this.krsServices.getkrs().subscribe(krsobs =>{
          console.log(krsobs);
          this.krlist=krsobs;
        });
        this.taskServices.gettask().subscribe(listtasksobs =>{

          console.log(listtasksobs);
          this.listtask  = listtasksobs;
        })


        this.editServices.sharetask.subscribe(x => this.tasklist = x)
    }


      updateTask(tasklist:taskdb){
        this.taskServices.updateTask(tasklist);
      }


}




 updateTask(tasks:taskdb){
    this.taskDoc = this.tasklist.doc(`tasks/${tasks.id}`);
    this.taskDoc.update(tasks);
  }

标签： angulartypescript

解决方案

尝试在您的服务中创建一个Subject对象，如下所示。

tasks = new Subject<any>();

每当您更新任务对象时，请调用对象上的方法next来Subject发布您的新数据，如下所示。

updateTask(newTasksObject){//blah //blah this.tasks.next(newTasksObject);}

现在，您希望保持数据同步的每个组件，例如您的任务列表对象，只需订阅Subject您已经在服务中创建的对象，如下所示。

yourService.tasks.subscribe(res=>{ //do your thing here, the res object is your newTasksObject mentioned earlier in the update method})

问候，

推荐阅读