Question

task.service.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);
  }

}

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

create-new.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);
  }

}

task.component.ts - 显示列表

searchResult = {};
searchResult.results = [{
    fields:{
     name: 'hello',
     type:'gekko',
     random:'randomString'
      }
   }
]
usedPropertiesAcrossModels = {
  name: 'hello',
  random:'hello'
}
   

const devices = searchResult.results.forEach(device => {
                const
                temp = Object.keys(device.fields).map((property)=>{
                if(device.fields.hasOwnProperty(property)) {
                        if (!usedPropertiesAcrossModels.hasOwnProperty(property)) {
                            delete device.fields[property];
                        }
                    }
                }) 
                    
                
   })
   console.log(searchResult)

Answer 1

组件中的变量todoService不会实时更新，因为您只需在组件init上调用此操作，最后您可以使用简单变量而不从服务绑定到tasklist变量。

您的案例是Rxjs和BehaviorSubject的完美时间。通过这种方式，您可以subscribe更改并在更新后获取新值。以下是您想要的简单抽象示例：

STACKBLITZ

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

您只需要调用setVariableHolder方法来设置新值：

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

和getVariableHolder获取更新后的值：

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

服务功能问题-Angular

1 个答案: