如何使用打字稿在angular2中调用函数？答案

【问题标题】：How to call function in angular2 using typescript?如何使用打字稿在angular2中调用函数？
【发布时间】：2018-05-18 04:09:46
【问题描述】：

我试图在ngOnit 中调用 trimObj 但抛出错误，当您使用打字稿在 angular2 中使用函数时，正确的实现是什么。打字稿新手，我将不胜感激。

app.component.ts

    export class StreamComponent implements OnInit {
        displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
        dataSource: MatTableDataSource<Element[]>;
        socket = io();
        constructor(private streamService: StreamService) {};
        ngOnInit() {
        this.socket.on('newMessage', (event) => {
                         console.log('New Event', event);
                          let data = trimObj(event);
                          this.dataSource.data.push(data);
                           this.dataSource.data = [...this.dataSource.data]
                          console.log("DATA",this.dataSource.filteredData);
                       });
                });
        }
        trimObj(obj) => {
              var neededKeys = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
              var newObj = {};
              neededKeys.forEach(function (key) {
                newObj[key] = obj[key];
              });
              return newObj;
            }
    }

export interface Element {
    ticketNum: number;
    ticketOpened: number;
    eventType: string;
    riskIndex: string;
    riskValue: number;
    severity: string;
    lastModifiedDate: number;
    assetID: string;
}

错误

ERROR in app.component.ts(29,17): error TS1144: '{' or ';' expected.
app.component.ts(29,20): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
app.component.ts(38,1): error TS1128: Declaration or statement expected.

【问题讨论】：

你的语法一团糟。在console.log("DATA",this.dataSource.filteredData); 之后有一个额外的});。 trimObject 是包含错误函数的方法还是字段？
我正在尝试调用返回值的函数。

标签： javascript angular typescript

【解决方案1】：

只需用 this

调用它

this.trimObj(event);

您实际上还有其他语法问题。这是您更正后的代码：

export class StreamComponent implements OnInit {
    displayedColumns = [
        'ticketNum',
        'assetID',
        'severity',
        'riskIndex',
        'riskValue',
        'ticketOpened',
        'lastModifiedDate',
        'eventType'
    ];

    dataSource: MatTableDataSource<Element[]>;

    socket = io();

    constructor(private streamService: StreamService) {}

    ngOnInit() {
        this.socket.on('newMessage', event => {
            console.log('New Event', event);
            const data = this.trimObj(event);
            this.dataSource.data.push(data);
            this.dataSource.data = [...this.dataSource.data];
            console.log('DATA', this.dataSource.filteredData);
        });
    }

    trimObj(obj): Element {
        const neededKeys = [
            'ticketNum',
            'assetID',
            'severity',
            'riskIndex',
            'riskValue',
            'ticketOpened',
            'lastModifiedDate',
            'eventType'
        ];
        const newObj: Element = <any>{};
        neededKeys.forEach(function(key) {
            newObj[key] = obj[key];
        });
        return newObj;
    }
}

【讨论】：

我试过这个let data = this.trimObj(event)，但它仍然抛出我在问题中提到的同样的错误。
ERROR app.component.ts(22,45)：错误 TS2345：“{}”类型的参数不可分配给“Element[]”类型的参数。类型“{}”中缺少属性“长度”。
哦，应该是数组，不是，但是数据还没有开始流式传输？
@hussain 我更新了答案。 trimObj() 方法已更新。
这被添加为一个数组，如果我尝试const newObj: Element[] = {}; 不起作用，我想作为对象推送

【解决方案2】：

您将trimObj 定义为类方法...您还尝试将其内联定义为箭头函数，这是语法错误。

实际上有几个语法错误——同时删除多余的});。

有几个解决方案：

用作类方法。

let data = this.trimObj(event);
...
trimObj(obj) {

删除=>，因为这会导致语法错误。现在，trimObj 被正确定义为类方法，您可以使用this.trimObj() 调用它。

作为单独的函数使用

由于trimObj 与StreamComponent 类没有特定关系，并且是一个实用函数，您可以单独定义它，也可以在它自己的文件中定义：

export function trimObj(obj) {

然后在StreamComponent 中您可以import { trimObj } from './utilties'（如果在同一个文件中定义，则不需要导入）并使用trimObj() 调用它。

【讨论】：