Javascript 角度4-类型错误：_co.send不是函数。（在'；#co.send（$event）'；中，'；#co.send'；未定义）

我正在尝试使用PostgreSQL数据库在Django后端和Angular 4前端之间创建实时聊天。我想在前端输入我自己的文本，按enter键并发送它。我在Angular 4-

TypeError中得到一个错误：_co.send不是一个函数。（在“\u co.send（$event）”中，“\u co.send”未定义）

。我不确定哪里有问题。你知道怎么了吗

app.component.html：

<button (click)="sendMsg()">Send Message</button>

<h4>Type away! Press [enter] when done.</h4>
<div><key-up3 (keyup7)="send($event)"></key-up3></div>

<h4>Little Tour of Heroes</h4>
<p><i>Add a new hero</i></p>
<div><little-tour></little-tour></div>

发送消息
打字！完成后按[输入]。
小英雄之旅
添加一个新的英雄

app.component.ts：

import { Component } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { ChatService } from './chat.service';
import { Output, EventEmitter } from '@angular/core';
import {enableProdMode} from '@angular/core';

enableProdMode();


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ WebsocketService, ChatService ]
})
export class AppComponent {

    constructor(private chatService: ChatService) {
        chatService.messages.subscribe(msg => {
      console.log("Response from websocket: " + msg.message);
        });
    }

    private message = {
        message: 'this is a test message'
    }

  sendMsg() {
        console.log('new message from client to websocket: ', this.message);
        this.chatService.messages.next(this.message);
        this.message.message = 'this is a test message2';
    }



}

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="keyup7.emit(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
   @Output() keyup7 = new EventEmitter<string>();
}

从'@angular/core'导入{Component}；
从“./websocket.service”导入{WebsocketService}；
从“./chat.service”导入{ChatService}；
从“@angular/core”导入{Output，EventEmitter}；
从“@angular/core”导入{enableProdMode}；
enableProdMode（）；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
提供者：[WebsocketService，ChatService]
})
导出类AppComponent{
构造函数（专用聊天室服务：聊天室服务）{
chatService.messages.subscribe（msg=>{
日志（“来自websocket的响应：“+msg.message”）；
});
}
私人消息={
消息：“这是一条测试消息”
}
sendMsg（）{
console.log（'从客户端到websocket的新消息：'，this.message）；
this.chatService.messages.next（this.message）；
this.message.message='这是一条测试消息2'；
}
}
@组成部分({
选择器：'key-up3'，
模板：`
{{value}}

`
})
导出类KeyUpComponent\u v3{
@Output（）keyup7=新的EventEmitter（）；
}

websocket.service.ts：

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    }
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'ws://localhost:8000/';

export interface Message {
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    message: data.message
                }
            });
    }
}

从'@angular/core'导入{Injectable}；
从“rxjs/Rx”导入*作为Rx；
@可注射（）
导出类WebsocketService{
构造函数（）{}
私人科目：接收科目；
公共连接（url）：Rx.Subject{
如果（！this.subject）{
this.subject=this.create（url）；
log（“成功连接：+url”）；
}
返回此.subject；
}
私有创建（url）：Rx.Subject{
设ws=newwebsocket（url）；
让可观察=Rx.observable.create(
（obs:Rx.Observer）=>{
ws.onmessage=obs.next.bind（obs）；
ws.onerror=obs.error.bind（obs）；
ws.onclose=obs.complete.bind（obs）；
返回ws.close.bind（ws）；
})
让观察者={
下一步：（数据：对象）=>{
if（ws.readyState==WebSocket.OPEN）{
send（JSON.stringify（data））；
}
}
}
返回Rx.Subject.create（观察者、可观察者）；
}
}

chat.service.ts：

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    }
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'ws://localhost:8000/';

export interface Message {
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    message: data.message
                }
            });
    }
}

从'@angular/core'导入{Injectable}；
从'rxjs/Rx'导入{可观察，主题}；
从“./websocket.service”导入{WebsocketService}；
const CHAT_URL='ws://localhost:8000/'；
导出接口消息{
消息：string
}
@可注射（）
出口类聊天室服务{
公共信息：主题；
构造函数（wsService:WebsocketService）{
this.messages=wsService
.connect（聊天室URL）
.map（（响应：MessageEvent）：Message=>{
让data=JSON.parse（response.data）；
返回{
message:data.message
}
});
}
}

您有

sendMsg

功能，但组件中缺少

send

功能？在

app.component.ts:

中有

sendMsg（）

。我不知道你的意思是什么？但是你也在调用

（keyup7）=“send（$event）”

，这是未定义的。如果还没有定义，请检查。