Ionic 2 error: Typescript Error Supplied parameters do not match any signature of call target

Question

I'm following a tutorial at https://angular-meteor.com/tutorials/whatsapp2/ionic/chats-page for an Ionic 2 application. I receive an error when I add the following code:

removeChat(chat: Chat): void {
    this.chats = this.chats.map<Chat[]>(chatsArray => {
        const chatIndex = chatsArray.indexOf(chat);
        chatsArray.splice(chatIndex, 1);

        return chatsArray;
    });
}

This function is being called on a click event on the button with class "option-remove"

<ion-content class="chats-page-content">
<ion-list class="chats">
    <ion-item-sliding *ngFor="let chat of chats | async">
        <button ion-item class="chat">
            <img class="chat-picture" [src]="chat.picture">
            <div class="chat-info">
                <h2 class="chat-title">{{chat.title}}</h2>

                <span *ngIf="chat.lastMessage" class="last-message">
                    <p *ngIf="chat.lastMessage.type == 'text'" class="last-message-content last-message-content-text">
                        {{chat.lastMessage.content}}
                    </p>
                    <span class="last-message-timestamp">{{chat.lastMessage.createdAt | amCalendar }}</span>
                </span>
            </div>
        </button>
        <ion-item-options class="chat-options">
            <button ion-button color="danger" class="option option-remove" (click)="removeChat(chat)">Remove</button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

Not sure how accurate the error message is but it seems to have a problem with the line this.chats.map<Chat[]>(chatsArray => {.

@helenkitt I could not reproduce the issue... make sure you have everything correctly setup like in the link. If you cannot solve, please try and reproduce the issue in a plunker :) — AVJT82
– AVJT82, Commented Mar 21, 2017 at 14:36

Suraj Rao · Accepted Answer · 2017-03-21 13:39:52Z

2

Array.prototype.map will take a function with object parameter not array.Its not necessary to use in this scenario. Try:

removeChat(chat: Chat): void {
  const chatIndex = this.chats.indexOf(chat);
  this.chats.splice(chatIndex,1);
}

answered Mar 21, 2017 at 13:39

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rushtoni88 Over a year ago

Tried using the above code instead, but this produced two new errors: Typescript Error Property 'indexOf' does not exist on type 'Observable<Chat[]>'. and Typescript Error Property 'splice' does not exist on type 'Observable<Chat[]>'.

Suraj Rao Over a year ago

So chats is an observable? In that case you maybe missing import 'rxjs/add/operator/map'

rushtoni88 Over a year ago

chats is of type Observable<Chat[]> - I have added this import but still the original error message. I already have Observable imported, do I have to import functions individually as well?

Suraj Rao Over a year ago

yes.. most of the rxjs functions whihc you use need to be imported explicitely.

Collectives™ on Stack Overflow

Ionic 2 error: Typescript Error Supplied parameters do not match any signature of call target

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related