javascript - api 调用在一种方法中工作但在另一种方法中不起作用 ---TypeError : Cannot read property 'getResponse' of undefined

Question

更新2:伙计们，我使用 Kushpf 回答问题已经解决了...但现在我得到了另一个...我想当我请求时我需要传递正确的 ID...我什至硬编码，但我仍然遇到错误..你能告诉我如何修复它吗...

GET http://sports.com/Rats/color/black?RatId=20060&timestamp=1508039029859 404 (Not Found)
An error occurred Response {_body: "{"timestamp":1508039067018,"status":404,"error":"N…ssage available","path":"/Rats/color/black"}", status: 404, ok: false, statusText: "Not Found", headers: Headers, …}

更新 1: 我尝试使用 Derek 解决方案，但仍然发生相同的错误..我打印出来并看到 self...因为我没有看到 sportsservice...有什么办法可以修复它

打印 self 值(value)观

init {elemen: M.fn.init(1), _event: {…}, option: {…}, tabl: M.fn.init(1), wrappe: M.fn.init(1), …}
altRowTemplate:
ƒ ()
columns:
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
content:
[div.k-grid-content.k-auto-scrollable, prevObjec: M.fn.init(1), contex: undefined]
dataSource:
init {option: {…}, _ma: {…}, _prefetc: {…}, _dat: init(21), _pristineDat: Array(21), …}
element:
[div#animals.contractPopupkGrid.k-grid.k-widget.k-reorderable, contex: div#animals.contractPopupkGrid.k-grid.k-widget.k-reorderable]
footer:
[prevObjec: M.fn.init(1), contex: div#animals.contractPopupkGrid.k-grid.k-widget.k-reorderable, selecto: ".k-grid-footer"]
options:
{prefi: "", nam: "Grid", column: Array(13), toolba: null, autoBin: false, …}
pager:
init {elemen: M.fn.init(1), _event: {…}, option: {…}, dataSourc: init, linkTemplat: ƒ, …}
resizable:
init {elemen: M.fn.init(1), _event: {…}, option: {…}, orientatio: "horizontal", _positionMous: "x", …}
rowTemplate:
ƒ ()
scrollables:
(2) [div.k-grid-header-wrap.k-auto-scrollable, div.k-grid-content.k-auto-scrollable, prevObjec: M.fn.init(1), contex: undefined]
selectable:
init {elemen: M.fn.init(1), _event: {…}, option: {…}, _marque: M.fn.init(1), _lastActiv: null, …}
table:
[table.k-selectable, prevObjec: M.fn.init(1), contex: undefined]
tbody:
[tbody, prevObjec: M.fn.init(1), contex: undefined]
thead:
[thead, prevObjec: M.fn.init(1), contex: undefined]
wrapper:
[div#animals.contractPopupkGrid.k-grid.k-widget.k-reorderable, contex: div#animals.contractPopupkGrid.k-grid.k-widget.k-reorderable]
_cellId:
"animals_active_cell"
_data:
(10) [init, init, init, init, init, init, init, init, init, init]
_draggableInstance:
init {elemen: M.fn.init(1), _event: {…}, option: {…}, _activate: false, userEvent: init, …}
_errorHandler:
ƒ ()
_events:
{dataBoun: Array(1)}
_group:
false
_groupableClickHandler:
ƒ (n)
_isMobile:
false
_muteRebind:
false
_progressHandler:
ƒ ()
_refreshHandler:
ƒ ()
_setContentWidthHandler:
ƒ ()
_size:
{widt: 960, heigh: 381}
__proto__:
r

• 我正在尝试学习 Angular 和 TypeScript。
• 我在使用新服务时遇到错误。
• 但是当我通过 rxjs 使用另一个服务时，它不会抛出错误。
• 你能告诉我如何解决这个问题吗？
• 提供下面的相关代码。
• 整个代码我会简单地给出它，因为它很大

//这里发生错误 this.sportsservice.getResponse(vals, 'get', "")

https://gist.github.com/texirv0203/e071a9ebea3a6aa0f8a0c65d47f75807

    $("#AnimalRatsGrid .RatNameFile").bind("click", function(e) {
      console.log("I am here");
       alert("I am here");
      //let params=values.selectedRow.sunDocID;
      //let url='http://sun.isports.com/PdfRatViewer.aspx?Ratid='+params+'&Ratsource=DISTRIBUTIONRat'

      kendo.ui.progress($("#loading"), true);
      //let vals ="Rats/color/black?RatId="+values.selectedRow.RatId;
                        let vals ="Rats/color/black?RatId="+"7887878787";

                //let vals ="Rats/color/black?RatId="+"233223232323";
                    this.sportsservice.getResponse(vals, 'get', "")
                                        .subscribe(data => {                     
                               //this.saveData(data, values.selectedRow.RatName);
                              //this.saveData(data, "untitled.txt");
                              var blob = new Blob([data], { type: 'application/octet-stream' });

                             // var blob = Blob {"size": "11573", "type": "application/octet-stream"}

                             let fire = "untitled1.txt";
                              this.sportsservice.saveAs(blob,fire);

                                                //kendo.ui.progress($("#loading"), false);
                                        },
                                        err => { 
                             //kendo.ui.progress($("#loading"), false);
                             }
                        );




    });

错误

VM61482:27 TypeError: Cannot read property 'getResponse' of undefined
    at HTMLAnchorElement.eval (animal.ts:427)
    at HTMLAnchorElement.dispatch (jquery-2.2.3.js:4737)
    at HTMLAnchorElement.elemData.handle (jquery-2.2.3.js:4549)
    at ZoneDelegate.invokeTask (zone.js:236)
    at Object.onInvokeTask (core.umd.js:6233)
    at ZoneDelegate.invokeTask (zone.js:235)
    at Zone.runTask (zone.js:136)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:304)

此方法没有错误

  public snakeRocket(values)
  {
    let grid = $("#AnimalRatsGrid").data("kendoGrid");

    let dataitem = grid.dataItem(grid.select());
    grid.dataSource.remove(dataitem);

    $("#divRocketAnimalRat").hide();

    let snakes = [
        { 
          "id": values.mainId,
          "RatDtos" : [{
            "RatId":dataitem.RatId,
            "RatName": dataitem.RatName,
            "RatType": dataitem.RatType,
            "RatData": this.encodeBase64,
            "notes": "",
            "notesId": 123,
            "sunDocID": 123,
            "url": "://localhost:1299/upload",
            "categoryType": "",
            "Timestamp": dataitem.date,
            "userID": dataitem.userID,
            "addedByName": dataitem.addedByName,
            "operationType": "Rocket",

            }]          
        } 
      ];

    this.sportsService.getResponse("player/color/Rat/", "post", snakes[0])
      .subscribe(data => {
          if (data.code === "S001") {
          } else {
          }
        },
        err => {
        }
      );

    $(".k-pager-numbers li").last().find("a").click();
  }

Answer 1

您必须小心 this 所指的内容:

在第二个(工作)示例中，您在设置了 this.sportservice 值的类上下文中执行 this.sportservice.getResponse() 。

但是，在您的错误示例中，您正在传递给 $().bind() 函数的回调内执​​行 this.sportservice.getResponse() 。此回调具有不同的上下文，因此 this 的值也不同。您可以阅读有关this如何工作的更多信息here .

一个简单的解决方案是创建一个对您实际想要使用的 this 上下文的新引用。例如:

var self = this;
$("#AnimalRatsGrid .RatNameFile").bind("click", function(e) {
  console.log("I am here");
   alert("I am here");
  //let params=values.selectedRow.sunDocID;
  //let url='http://sun.isports.com/PdfRatViewer.aspx?Ratid='+params+'&Ratsource=DISTRIBUTIONRat'

  kendo.ui.progress($("#loading"), true);
  //let vals ="Rats/color/black?RatId="+values.selectedRow.RatId;
                    let vals ="Rats/color/black?RatId="+"7887878787";

            //let vals ="Rats/color/black?RatId="+"233223232323";
                self.sportsservice.getResponse(vals, 'get', "")
                                    .subscribe(data => {                     
                           //this.saveData(data, values.selectedRow.RatName);
                          //this.saveData(data, "untitled.txt");
                          var blob = new Blob([data], { type: 'application/octet-stream' });

                         // var blob = Blob {"size": "11573", "type": "application/octet-stream"}

                         let fire = "untitled1.txt";
                          self.sportsservice.saveAs(blob,fire);

                                            //kendo.ui.progress($("#loading"), false);
                                    },
                                    err => { 
                         //kendo.ui.progress($("#loading"), false);
                         }
                    );




});