“我有这些组件,我也附上了代码。A.添加按钮B.添加任务C。负责人D.清单任务。和一个服务MSGService Thru,用于添加按钮流更新并将任务子添加到更新中。我希望添加任务视图切换时,我点击“添加任务”按钮。它不会在第一次显示后返回。
ADD BUTTON
-------------
import { Component } from '@angular/core';
import { MsgService } from '../../services/msgservice.service';
@Component({
selector: 'app-addbutton',
templateUrl: './addbutton.component.html',
styleUrls: ['./addbutton.component.css'],
})
export class AddbuttonComponent {
toggletask: boolean = false;
togglebutton: boolean = false;
constructor(private msg: MsgService) {}
subcribe() {
console.log('sending msg');
this.msg.setMessage({
toggleAddTask: !this.toggletask,
toggleButton: !this.togglebutton,
});
}
}
html
----
<div class="button"><button (click)="subcribe()"> ADD TASK </button></div>
ADD TASK
----------
import { Component, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { MsgService } from 'src/app/services/msgservice.service';
@Component({
selector: 'app-addtask',
template: `
<form *ngIf="toggletask">
<label for="taskdesc"> Task Name </label>
<input type="text" id="taskdesc" /> <br />
<label for="date"> Date: </label>
<input type="text" id="date" /><br />
<label for="complete"> Complete </label>
<input type="checkbox" id="complete" />
</form>
`,
styles: [],
})
export class AddtaskComponent implements OnInit {
toggletask: boolean = false;
togglebutton: boolean = false;
subscription: Subscription;
constructor(private msg: MsgService) {
this.subscription = this.msg.getMessage().subscribe((val) => {
this.toggletask = val.toggleAddTask;
console.log('toggle task val ', val.toggleAddTask);
this.togglebutton = val.toggleButton;
});
}
ngOnInit() {
//throw new Error('Method not implemented.');
console.log('add task loaded inonint');
}
toggle(): void {
this.msg.getMessage().subscribe((val) => {
this.toggletask = val.toggleAddTask;
console.log('toggle task val ', val.toggleAddTask);
this.togglebutton = val.toggleButton;
});
}
}
HEADER
------
<p>header works!</p>
<app-addbutton />
MSGSERVICE
------------
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class MsgService {
toggletask: boolean = false;
togglebutton: boolean = false;
msg: BehaviorSubject<{ toggleAddTask: boolean; toggleButton: boolean }> =
new BehaviorSubject<{ toggleAddTask: boolean; toggleButton: boolean }>({
toggleAddTask: false,
toggleButton: false,
});
constructor() {}
setMessage(message: { toggleAddTask: boolean; toggleButton: boolean }): void {
let tgtask: boolean = this.toggletask;
let tgbutton: boolean = this.togglebutton;
this.msg.next({
toggleAddTask: !tgtask,
toggleButton: !tgbutton,
});
console.log('in setmsg', this.msg.value);
//console.log(JSON.stringify(this.msg));
}
getMessage(): Observable<{ toggleAddTask: boolean; toggleButton: boolean }> {
console.log('in get', this.msg.value);
return this.msg.asObservable();
}
}
type here
字符串
我试过许多不同的东西,但不能得到它的工作,也有聊天gpt充分审查代码和绅士不能提供我一个修复这个问题,并建议我检查与论坛。所以,如果你可以的话,请帮助,这将是非常感激的。
1条答案
按热度按时间pieyvz9o1#
错误在您的MsgService的 setMessage 方法。setMessage 方法的以下部分:
字符串
应更新为:
型
为什么?因为当你使用this.toggletask时,它会将变量局部到你的服务,它总是为false,永远不会改变。但是setMessage试图用在方法本身中发送的参数值来设置behaviourSubject的值。因此,更新后的方法将如下所示:
型