內聯函數中無法訪問Typescript方法變量

Question

我有以下代碼，我在一個內聯函數中將值加載到數組usageCategory中。 但是，當我嘗試在此函數之外打印值時，不會打印任何內容。

getAllUsageCategoryElements(){

        var usageCategory: string[] =  [];

        var that=this;

        // extract all the droplist elements and put into an array so that I can validate them from another page.
        this.addAdditionalCostDialogue.usageCategoryDropListContainer.all(by.tagName('li')).all(by.tagName("span")).each(function (element, index) {
            element.getText().then(function (text){

                 //console.log("printing directly " + text);
                // the above code works fine and prints all the drop list contains but when I try to add it to an array

                that.usageCategory.push(text);
            })
        });

        console.log("Size of the array is " + usageCategory.length);

        usageCategory.forEach(element => {
            console.log("Printing text " + element);
        });
    }

我在這里做錯了什么？ 我如何在內聯函數之外訪問這些數組值？ 任何幫助將非常感激。

Answer 1

使用ElementArrayFinder.prototype.map

這可能是使用.map函數的好時機，因為它將把ElementArrayFinder對象轉換為您創建的對象列表。 http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.map在量角器示例（在鏈接中）中，地圖返回對象列表。 對於您的情況，您需要等待該元素的文本並在map回調函數中將其返回。

async getAllUsageCategoryElements() {
    // extract all the droplist elements and put into an array so that I can validate them from another page.
    const spans = this.addAdditionalCostDialogue.usageCategoryDropListContainer
        .all(by.tagName('li')).all(by.tagName("span"));
    // Map over an ElementArrayFinder to get a list of returned items from
    // map operation. In this case, we are returning a list of strings
    const usageCategories = await spans.map(async (el) => {
      const text = await el.getText();
      // console.log(`printing directly ${text}`);
      return text;
    });

    console.log("Size of the array is " + usageCategories.length);
    for (let usageCategory of usageCategories) {
      console.log(`printing text ${usageCategory}`);
    }
}

Answer 2

您的代碼中有兩個問題：

1） usageCategory是一個局部變量，而不是getAllUsageCategoryElements函數的getAllUsageCategoryElements ，因此您不能使用that.usageCategory.push(text); ，只需使用usageCategory.push(text);

2） getText()是異步API，以下同步代碼將在getText()之前執行，
因此執行時useCategory.length為0 。 你需要把這些同步碼在下一then()后面getText()使他們在以后執行，然后getText()

console.log("Size of the array is " + usageCategories.length);
for (let usageCategory of usageCategories) {
  console.log(`printing text ${usageCategory}`);
}

更正的代碼：

getAllUsageCategoryElements(){

    var usageCategory: string[] =  [];


    // extract all the droplist elements and put into an array so that I can validate them from another page.
    this.addAdditionalCostDialogue
        .usageCategoryDropListContainer
        .all(by.tagName('li'))
        .all(by.tagName("span"))
        .each(function (element, index) {

            element.getText().then(function (text){
                //console.log("printing directly " + text);
                // the above code works fine and prints all the drop list contains but when I try to add it to an array
                usageCategory.push(text);
            })
    })

    .then(function(){

        console.log("Size of the array is " + usageCategory.length);

        usageCategory.forEach(element => {
            console.log("Printing text " + element);
        }); 

        return usageCategory;
    });

}