全局变量在 Angular 7 的子函数中不起作用

Question

我有一个问题请为我解释

import { Component, OnInit,ViewChild,ElementRef  } from '@angular/core';
import {Http,Headers} from "@angular/http";
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, Subscription } from 'rxjs';
import { map, filter, debounceTime, tap, switchAll, count } from 'rxjs/operators';
@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  constructor(private http:Http) {
   }
   @ViewChild('abcde') abcde: ElementRef;
   private typeTerm = new Subject<string>();
   public result:string="";
}

和函数调用变量结果

fTyping(a){
  this.result="abcd"; //It Working
  if(this.timeout){ clearTimeout(this.timeout);}
  this.timeout = setTimeout(function() {
    this.result="efgh"; //**Not Working**
    const url="http://localhost:81/api/films/GetFilms",body=JSON.stringify({username:"admin",password:"admin",page:1,"search":a,sort:this.txtSort});
    const requestHeader = new Headers({ 'Content-Type': 'application/json' });
    http1.post(url,body,{ headers : requestHeader }).toPromise().then(res=>{
    temp=res.json();
    console.log(res.json().length);
    this.isLoading=false;
    if(res.json().length<10){
      this.isData=false;
    }
    else
      this.isData=true;
    }).catch(x=>{
      this.result=JSON.stringify({Name:"No data",Title:"No Data",Manufacture:"No Data",Country:"No Data"});
      this.isLoading=false;
      this.isData=false;
    });
  },500);
}

问题：为什么在函数设置中超时这个结果没有醒来。有什么方法可以让它在函数 setTimeout 中工作吗？

Answer 1

实际上 setTimeout 在侧函数中创建自己的 this 范围，这就是为什么它不起作用的原因，您可以将它的引用存储在另一个变量中

var that=this;
this.timeout = setTimeout(function() {
    that.result="efgh"; //use that
  },500);

或者你可以使用箭头函数（箭头函数不要创建自己的这个范围）

setTimeout(() => {
 this.result="efgh";
},500)