Angular 维修功能问题-角度

task.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class TaskService {
   private tasklist= [{taskname:"sample task",taskdetail:"This is a test task",status:"todo"}];

  constructor() { }

  getTasklist(chosenstatus){
    return this.tasklist.filter((e)=>{

        if(e.status==chosenstatus){

          return e;

        }
    });

  }

  addTask(name,task){
    console.log(this.tasklist);/*this shows new task added*/
    this.tasklist.push({taskname:name,taskdetail:task,status:"todo"});
  }

}

以上是我的服务。使用addTask函数添加任务后，它会将新任务对象添加到任务数组中，但在列出时不会显示

create-new.component.ts-添加新组件

     import { Component, OnInit } from '@angular/core';
import { TaskService } from '../task.service';
@Component({
  selector: 'app-create-new',
  templateUrl: './create-new.component.html',
  styleUrls: ['./create-new.component.css']
})
export class CreateNewComponent implements OnInit {
  taskservice;
  constructor(taskservice :TaskService) {
    this.taskservice= taskservice;
   }

  ngOnInit() {
  }

  onSubmit(form){

    this.taskservice.addTask(form.value.cardheading,form.value.cardcontent);
  }

}

task.component.ts-显示列表

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent implements OnInit {
@Input() sts;
  todoService;
  taskService;
  constructor(toDoS:TaskService) { 
    this.taskService=toDoS;
  }

  ngOnInit() {
    this.todoService=this.taskService.getTasklist(this.sts);
  }

}

---

组件中的变量

todoService

不会实时更新，因为您只需在组件init上调用此操作，最后您就有了一个简单的变量，而不必从服务绑定到

tasklist

变量

你的情况是一个完美的时间和。通过这种方式，您可以订阅更改，并在更新后获得新值。以下是您想要的简单抽象示例：

这里我修改了一个组件中的服务变量，它会实时影响另一个组件中的变量。所有的魔法都在这里：

只需调用

setVariableHolder

方法即可设置新值：

this._abstractService.setVariableHolder('valueGoesHere'); // Replace 'valueGoesHere' string with any data you need

和

getVariableHolder

获取更新值：

this._abstractService.getVariableHolder().subscribe(val => {
  this.anyComponentVariable = val;
})

---

你调用这两种方法的流程是什么？@haifzhan我在上面添加了更多信息。我正在使用表单的提交创建一个新任务。任务的显示是独立的函数，如上面task.component.ts中所示。如果我理解正确，您可以从

taskService

获取任务，然后将结果分配给

todoService

变量并以HTML显示？在推出新任务后，HTML中没有任何变化？是@commercialsequence