Types of parameters 'newTask' and 'value' are incompatible.

chalie001
chalie001 used Ask the Experts™
on
hi am geting the following error
ERROR in src/app/tasks/tasks-add/tasks-add.component.ts:24:17 - error TS2345: Argument of type '(newTask: Task) => void' is not assignable to param
eter of type '(value: Task[]) => void'.
  Types of parameters 'newTask' and 'value' are incompatible.
    Type 'Task[]' is missing the following properties from type 'Task': id, name, completed, dueDate

24                 (newTask: Task) => {
                   ~~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.

my code is
import { Component, OnInit } from '@angular/core';
import { Task } from '../task.model';
import {TaskService} from '../task.service';

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

    addTaskValue: string = null;

    constructor(private taskService: TaskService) { }

    ngOnInit() {

    }

    onTaskAdd(event) {
        let task: Task = new Task(event.target.value,false, this.getTodayAsString());
        this.taskService.addTask(task)
            .subscribe(
                (newTask: Task) => {
                    // clear the input
                    this.addTaskValue = ' ';
                    this.taskService.onTaskAdded.emit(newTask);
                }
            )
    }

    getTodayAsString() {
        let today = new Date();
        let dd: any = today.getDate();
        let mm: any = today.getMonth() + 1;
        let yyyy = today.getFullYear();

        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }

        return mm + '/' + dd + '/' + yyyy;
    }
}

Open in new window


error
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michael ArciniegaExperts Exchange Dev

Commented:
Double check what the this.taskService.addTask service is returning. It appears to be returning an array of Task objects (Task[]) and you're trying to assign newTask to a single Task object. The fix could be as simple as:

(newTask: Task[]) => {

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You have presented us with potentially two different problems. The listing and error and the image.

On the listing - how is the addTask() function in the taskService defined

 this.taskService.addTask(task)

Open in new window


More specifically what have you defined its return to be?
Michael ArciniegaExperts Exchange Dev

Commented:
Julian, I think the error in the image is his Typescript linter complaining about the ‘let’ variable definition without using it again. I’d like to know the answer to your last question too :D
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@Michael,

I know what is causing it - I was addressing the ambiguity of the question asked - which problem was he wanting us to address.

Author

Commented:
am geting this error now
erro09
this the code
import { Component, OnInit } from '@angular/core';
import { Task } from '../task.model';
import {TaskService} from '../task.service';

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

    addTaskValue: string = null;

    constructor(private taskService: TaskService) { }

    ngOnInit() {

    }

    onTaskAdd(event) {
        let task: Task = new Task(event.target.value,false, this.getTodayAsString());
        this.taskService.addTask(task)
            .subscribe(
                (newTask: Task[]) => {
                    // clear the input
                    this.addTaskValue = ' ';
                    this.taskService.onTaskAdded.emit(newTask);
                }
            )
    }

    getTodayAsString() {
        let today = new Date();
        let dd: any = today.getDate();
        let mm: any = today.getMonth() + 1;
        let yyyy = today.getFullYear();

        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }

        return mm + '/' + dd + '/' + yyyy;
    }
}

this task service
// import {Http} from '@angular/http';
import {HttpClient, HttpRequest} from '@angular/common/http';
import {EventEmitter, Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
// import {Task} from 'app/tasks/task.model';
// import { Task } from 'src/app/tasks/task.model';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {Task} from './task.model';
// import {Task} from '../task.model';
// import {Task} from 'task.model';

@Injectable()
export class TaskService {

    onTaskAdded = new EventEmitter<Task>();

    constructor(private http: HttpClient) {

    }

  /*  getTasks() {
        return this.http.get('/api/tasks').map(response => response.json());
    }*/

    getTasks(): Observable<Task[]> {
        // return this.http.get('/api/tasks').map(response => response.json());
       // return this.http.get<Task[]>(this.taskUrl).pipe(map(response => response));
        return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));
    }

    saveTask(task: Task, checked: boolean) {
        task.completed = checked;
        // return this.http.post('/api/tasks/save', task).map(response => response.json());
        return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));
    }

    addTask(task: Task) {
        // return this.http.post('/api/tasks/save', task).map(response => response.json());
        return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));
    }

}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
If you are referring to the Task is never reassigned - that is not technically an error.

What the linter is saying is that your task variable never changes and therefore you can make it a const instead of a let.

Just change your let to const.

There seems to be another issue - the false parameter is underlined in red (for the new Task()) - that might need to be looked at as well.

Author

Commented:
am geting this error
error
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
This is turning into a debug exercise with limited information.

The message that is being showed is pretty self explanatory.
You are passing a parameter that is described as type Task[]  to a function that expects its parameter to be Task.

I asked t his above
On the listing - how is the addTask() function in the taskService defined
You did not respond.

What you did was changed your subscribe call back to define its input parameter as Task[] - which now makes your emit fail.

So, let's go back to the actual problem.

Show us what the addTask() method looks like so we can get to the bottom of what is really going on. Randomly changing types in your code trying to make things work is not the right way of solving this problem.

Author

Commented:
you mean this
 addTask(task: Task) {
        // return this.http.post('/api/tasks/save', task).map(response => response.json());
         return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));
    }

Open in new window


is there in previous msg
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Apologies - I did not scroll all the way to the bottom so missed the function.

I am confused. The function names suggests you are adding a task - but the function issues a get and from this
 return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));

Open in new window

Suggests that it is returning an array of Tasks
(BTW the pipe() is totally unnecessary here - in the past we had to pipe to a map to extract the json from the response - however this is done for you now)

From the above it suggests that your submit handler (where you received the original error) is correct in assuming an array of Tasks return (although it does not make sense given the name)
IF we look at the definition of onTaskAdd we see this
 onTaskAdded = new EventEmitter<Task>();

Open in new window

This expects to emit a single task - not an array.

There is more to this than explaining the errors. There are some fundamental flaws in your code. You need to decide what it is your code should be doing because as it stands it does not make a whole lot of sense.

Why does addTask not use the task passed to it and instead returns a list of tasks.
What is onTaskAdded for?

Let's start with those.

Author

Commented:
check the  class TaskService in previous message
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I did - the answers to my questions are not there.

You have not addressed my first question.


The second question - on the emit - you are emitting a value - where are you listening for that emission?

Author

Commented:
error
am geting this error now
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
We are going in circles.

Your parameter has to match the definition of the Observable that is emitting values.

 
addTask(task: Task) {
        // return this.http.post('/api/tasks/save', task).map(response => response.json());
        return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));
    }

Open in new window

addTask emits arrays of Task (Task[]) so your subscribe function has to match that.

The problem is in your emit - your emit expects a single task - so if you try and send task (when it is defined as Task[]) it is going to error.

Which brings me back to my question. WHAT is your emit on onTaskAdded used for - what is consuming that emission? It appears to be expecting a single task.

Having said all that - I am going to go back to my earlier comment that your code does not make sense

In your addTask you have this
return this.http.get<Task[]>('/api/tasks').pipe(map(response => response));

Open in new window

That looks like a get all tasks - not an add task, but you are returning this to a submit that expects to be handling a single task.

You need to figure out what you are doing there - we cannot make progress until these anomoalies have been resolved.

Author

Commented:
you can check the app hear https://github.com/chalie86/Java.git


name of app is spring-reciept-app
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
No, that is not going to help me - I need you to explain what it is you are intending with your code.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial