为什么点击两次后得到值?+ 承诺 [英] Why getting the value after clicking it twice? + Promise

问题描述

我在处理 angular 的 promise 函数时缺乏对异步操作的理解.所以基本上，我试图从 promise 方法中获取一个值，并将其分配给组件中的全局变量.但是，当我单击一个按钮一次时我无法检索该值，并且在我再次单击一个按钮后它终于开始显示该值.

I have a lack of understanding asynchronous operation while I'm dealing with a promise function in angular. So basically, I'm trying to get a value from a promise method and assign it to a global variable in a component. However, I am unable to retrieve the value when I click on a button once and it finally starts to show the value after I clicked on a button once more.

我点击它一次时出错:

无法读取未定义的属性matchId"

我点击它两次后获得的价值:

Value I get after I clicked it twice:

3

HTML:

<button type="submit" (click)="loadInfo(form)">Submit</button>

服务:

@Injectable()
export class Web3Service {
    constructor...

    getInfo(address: string): Promise<any> {
        return this.TestBetting.deployed().then((instance) => {
          return instance.getInfo.call(address);
        })
        .then((value) => {
          var serialized = this.itemsService.getSerialized<IGetInfo>(value); 
          return this.mappingService.mapValueToGetInfo(serialized); 
        })
        .catch((e) => {
          console.log(e);
        });
    }  
}

组件:

export class HomeComponent {
    infoMapped: any;

    constructor(private web3Service: Web3Service) {}

    loadInfo(): void {
        var test = this.web3Service.getInfo(this.address); 
        test.then((value) => {
            this.infoMapped = value;
        })

        // this.infoMapped.matchId is undefined on a first attempt
        var length = this.infoMapped.matchId;
        for (var i = 0; i < length; i++) {
        //...
        }
    }
}

需要修复什么才能在单击一个按钮一次后就可以检索到 infoMapped 值?

What needs to be fixed so that infoMapped value can be retrieved after clicking a button only once?

推荐答案

问题仍然是code after test.then()(即for) 将在之前执行 this.infoMapped = value; 因为 this.infoMapped = value; 只会在 this.infoMapped = value; 时执行code>test 承诺会解析，它只会在 for 运行后的一段时间 解析.

The problem is still that code after the test.then() (i.e. the for) will execute before the this.infoMapped = value; because this.infoMapped = value; will only execute when the test promise resolves, and it will only resolve some time after the for runs.

我的建议是:将处理"逻辑移到一个新方法中，并从 .then() 中调用它.

What I suggest: move the "handling" logic to a new method and call it from the .then().

所以，这个:

loadInfo(): void {
    var test = this.web3Service.getInfo(this.address); 
    test.then((value) => {
        this.infoMapped = value;
    })

    // this.infoMapped.matchId is undefined on a first attempt
    var length = this.infoMapped.matchId;
    for (var i = 0; i < length; i++) {
    //...
    }
}

会变成这样:

loadInfo(): void {
    var test = this.web3Service.getInfo(this.address); 
    test.then((value) => {                 // <=== changed this line
        this.handleInfo(value)             // <=== changed this line
     });
}

handleInfo(value): void {                   // <=== added this whole method.
    this.infoMapped = value;

    var length = this.infoMapped.matchId;
    for (var i = 0; i < length; i++) {
    //...
    }
}

这篇关于为什么点击两次后得到值?+ 承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！