angularjs 当我单击“添加任务”按钮时,Angular 属性主题不更新属性值

fhg3lkii  于 2023-08-02  发布在  Angular
关注(0)|答案(1)|浏览(113)

“我有这些组件,我也附上了代码。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充分审查代码和绅士不能提供我一个修复这个问题,并建议我检查与论坛。所以,如果你可以的话,请帮助,这将是非常感激的。

pieyvz9o

pieyvz9o1#

错误在您的MsgServicesetMessage 方法。setMessage 方法的以下部分:

let tgtask: boolean = this.toggletask;
let tgbutton: boolean = this.togglebutton;

字符串
应更新为:

let tgtask: boolean = message.toggleAddTask;
let tgbutton: boolean = message.toggleButton;


为什么?因为当你使用this.toggletask时,它会将变量局部到你的服务,它总是为false,永远不会改变。但是setMessage试图用在方法本身中发送的参数值来设置behaviourSubject的值。因此,更新后的方法将如下所示:

setMessage(message: { toggleAddTask: boolean; toggleButton: boolean }): void {
    let tgtask: boolean = message.toggleAddTask;
    let tgbutton: boolean = message.toggleButton;

    this.msg.next({
      toggleAddTask: tgtask,
      toggleButton: tgbutton,
    });
    console.log('in setmsg', this.msg.value);
    //console.log(JSON.stringify(this.msg));
  }

相关问题