Greetings to All, I am currently working on a project to develop a small application that helps in managing tasks for employees. One of the features allows users to add a failed call attempt. However, I have encountered an issue where the new call object is not displayed in the view after adding it to the calls array within the CallService.
Here is the View Section
<mat-list>
<div mat-header style="color:#043755; font-weight: 700; font-size: 1.8rem; text-align: center;">Anrufe:</div>
<mat-list-item *ngFor="let call of calls;">
<mat-icon mat-list-icon>phone</mat-icon>
<div mat-line style="font-size: 1.2rem;">{{call.number}}</div>
<div mat-line style="font-size: 1.2rem;"> {{call.date | date}} </div>
<div mat-line style="font-size: 1.2rem; color:chocolate;">{{call.status}}</div>
</mat-list-item>
*The calls should be loaded using the ngFor directive.
This is the Component Code snippet
import {Component, OnInit} from '@angular/core';
import { Call, CallService } from '../call.service';
/**
* @title List with sections
*/
@Component({
selector: 'app-missed-calls',
styleUrls: ['./missed-calls.component.css'],
templateUrl: './missed-calls.component.html',
})
export class MissedCallsComponent implements OnInit {
public calls: Call[] = [];
constructor(private _callService: CallService) { }
ngOnInit() {
this.calls = this._callService.getCalls();
}
}
I have injected the service and initialized my array during ngInit.
And here is the Service Implementation
import { Injectable } from '@angular/core';
export interface Call {
number: string;
date: Date;
status: string;
}
@Injectable({
providedIn: 'root'
})
export class CallService {
constructor() { }
calls: Call[] = [
{number: '0677/61792248',
date: new Date('1/1/14'),
status: 'Verpasst'},
];
getCalls() {
return this.calls;
}
addCall(call: Call) {
this.calls = [...this.calls, call];
}
}
If anyone could offer assistance in resolving this issue, it would be greatly appreciated! :D