Question

我从REST API获取数据（为此票证使用Angular内存服务），并使用该数据(myDateEntry)创建一个对象。对象将存储在数组(myDateEntries)中。在组件(Timetracker)中，我更改了值并通过数据绑定显示了这些值。它可以与myDateEntry对象中的Number变量一起使用，但不能与Date变量一起使用。日期变量的更改永远不会显示在视图中。但是，我可以看到更改是通过console.log（）在数据模型中进行的。我该如何对日期变量进行这项工作？

myDateEntry：

export class myDateEntry{

showBreakTime: Date;
test: number;

constructor(data: any){
    console.log("new instance of myDateEntry created");
    this.test = 0;
    this.showBreakTime = new Date();
   }
}

myDateEntries：

import {myDateEntry} from './myDateEntry';

export class myDateEntries{
myDateEntries: myDateEntry []=[];
myDateEntry: myDateEntry;
addEntry: boolean;

constructor(){
    console.log("new instance of myDateEntries created");
}

public addDateEntry(data: myDateEntry): void{
    this.myDateEntries.push(data);
} 
}

myService：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class MyService {

private url = 'api/workdayObject';

constructor(private http: HttpClient) {
}

getWorkdayObject () {
    return this.http.get(this.url);
}
}

Timetracker：

import { Component, OnInit } from '@angular/core';
import { myDateEntry } from '../model/myDateEntry';
import { MyService } from '../services/myService.service';
import { myDateEntries } from '../model/myDateEntries';

@Component({
  selector: 'app-timetracker',
  templateUrl: './timetracker.component.html',
  styleUrls: ['./timetracker.component.css']
})
export class TimetrackerComponent implements OnInit {

  myDateEntry: myDateEntry;
  myDateEntries: myDateEntries;

  constructor(private myService: MyService) {

  }

  ngOnInit() {
    this.myDateEntries = new myDateEntries();
    this.myService.getWorkdayObject().subscribe(data =>{
      console.log(data);
    });
    this.getWorkdayObject();

  }

  getWorkdayObject(){
    this.myService.getWorkdayObject().subscribe(data =>{
      this.myDateEntry = new myDateEntry(data);
      this.myDateEntries.addDateEntry(this.myDateEntry);
    });
  }

  changeTime(){
   this.myDateEntry.showBreakTime.setMinutes(
   this.myDateEntry.showBreakTime.getMinutes()+15);
   console.log("this.myDateEntry.showBreakTime.getHours(): " + 
    this.myDateEntry.showBreakTime.getHours());
   console.log("this.myDateEntry.showBreakTime.getMinutes(): " + 
    this.myDateEntry.showBreakTime.getMinutes());
  }

  changeNumber(){
    this.myDateEntry.test = this.myDateEntry.test + 1;
    console.log("this.myDateEntry.test: " + this.myDateEntry.test);
  }

}

Timetracker视图：

<p>
{{this.myDateEntry?.showBreakTime | date: 'HH:mm'}} h
</p>
<button (click)="changeTime()">changeTime</button>
<br/>
<p>
{{this.myDateEntry?.test}}
</p>
<button (click)="changeNumber()">changeNumber</button>

角度：数据模型值更改，但视图（HTML）未显示更改

0 个答案: