Question

我有一个AngularJS应用程序，在其中一个页面上，显示了许多小部件。其中一个窗口小部件显示一个表，其中包含有关应用程序正在监视的系统的信息。该表目前包含两列：a＆＃39; Type＆＃39;列，显示该行中显示的信息类型;和一个＆＃39;数据＆＃39;列，显示包含该信息的变量的值。

可以使用在“设置”时打开的对话框自定义窗口小部件上显示的信息。单击小工具栏上的按钮。有＆＃39;列＆＃39;和＆＃39;行＆＃39;该对话框上的文本输入字段，用于设置要在表格中显示的列标题和行。目前，当用户开始输入＆＃39; Rows＆＃39;在文本输入字段中，显示一个下拉列表，向用户显示可在表中显示的变量，以及与用户键入的内容相匹配的变量（即，当他们继续键入时，可用选项列表将更具体）。

用户在文本输入字段中输入时显示此下拉菜单的函数是：

$scope.autocompleteVarsFilter = function(query) {
    if(!query && lastVarQryKw) {
        query = lastVarQryKw;
    }
    var result = Object.keys(fxVar.getVars()).filter(function(name) {
        return name.indexOf(query.toLowerCase()) !== -1;
    });

    if(result.length > 0) {
        lastVarQryKw = query;
    }
    return result;
};

我目前正在尝试向该表添加第三列，以显示指向用户将选择的给定页面的链接。我决定一个＆＃39;链接＆＃39;将由字符:开头的字符串表示（即，如果用户键入:index，则该链接将指向该网站的主页）。

用户输入:后，可以在“下拉菜单”中显示可用页面的完整列表，并且当用户继续输入时，应过滤此列表根据他们输入的内容（因为它是变量名称）

我更新了我的功能如下：

$scope.autocompleteVarsFilter = function(query) {
    if(query.startWith(":") {
        var buttonsQuery = query.substring(1);
        if(!buttonsQuery && lastVarQryKw) {
            buttonsQuery = lastVarQryKw;
        }

        var userPages = pagesPresets; //This is getting the full list of available pages from a service called 'pagesPresets'
        console.log("Value of userPages: ", userPages);

        var page;
        for(page in userPages) {
            console.log("for loop started");
            if(page.key.startWith(buttonsQuery)) {
                console.log("Matching page found: ", page);
            }
        }

        if(result.length > 0) {
            lastVarQryKw = query;
        }
        return result;

    } else {
        if(!query && lastVarQryKw) {
            query = lastVarQryKw;
        }
        var result = Object.keys(fxVar.getVars()).filter(function(name) {
            return name.indexOf(query.toLowerCase()) !== -1;
        });

        if(result.length > 0) {
            lastVarQryKw = query;
        }

        return result;
    }
};

else语句的if子句正在执行函数最初正在执行的操作（即显示可用变量），并且当前仍然按预期工作。但是，在测试此功能时，如果我现在在文本输入字段中键入:后跟任何字符串，则if子句会运行，但可用页面不会显示在下拉列表中，我看到我的console.log()语句在控制台中显示以下输出：

userPages的价值：


0：{_ id：＆＃34; ...＆＃34;，_ rev：1，_url：＆＃34; ...＆＃34;，key：＆＃34; pages / auth＆＃34; ，{...}，...}

1：{_ id：＆＃34; ...＆＃34;，_rev：13，_url：＆＃34; ...＆＃34;，key：＆＃34; pages / userpage2＆＃34; ，价值：{...}，...}

2：{_ id：＆＃34; ...＆＃34;，_rev：13，_url：＆＃34; ...＆＃34;，key：＆＃34; pages /＆＃34; ，值：＆＃34; / pages / userpage1＆＃34;，...}

for loop started


TypeError：无法读取属性＆＃39; startsWith＆＃39;未定义的

问题似乎是我无法引用用户页面对象的key属性/属性，以使其值与用户在文本框中键入的值相匹配。

鉴于我可以看到我使用的page个对象的属性key保存了我想要过滤的值，我该如何实际掌握这个key 1}}属性使用它？

我尝试将for循环更改为：

var page;
var key;
for(page in userPages) {
    console.log("for loop started");
    key = page.getAttribute("key");
    if(key.startsWith(buttonsQuery)) {
        console.log("Matching page found: ", page);
    }
}

但这只是输出：

for loop started

TypeError：page.getAttribute不是函数

有人有任何建议吗？

修改

我尝试了@Alex K在答案中提出的建议，并将我的函数中的for循环更新为：

var page;
var pageKey;
var key;
var result;

console.log("Iterating using foreach");
for(page in userPages) {
    page = userPages[page];
    if(page.key.startsWith(buttonsQuery)) {
        console.log("Matching page found: ", page.key);
        pageKey = page.key;
        result = pageKey;
    }
};

我也尝试将其更新为：

userPages.forEach(function(page) {
    page = userPages[page];
    if(page.key.startsWith(buttonsQuery)) {
        console.log("Matching page found: ", page.key);
        pageKey = page.key;
        result = pageKey;
    }
});

和

userPages.forEach(function(page) {
    page = userPages[page];
    if(page.key.startsWith(buttonsQuery)) {
        console.log("Matching page found: ", page.key);
        pageKey = page.key;
        result = pageKey;
    }
});

但是这些都在控制台中提供了相同的输出，即：

使用foreach迭代

ctrl.js：483找到匹配页面：pages / userpage2

ctrl.js：483匹配页面：pages / userpage1

ctrl.js：483找到匹配页面：pages /

ctrl.js：483找到匹配页面：pages / pagetitle

ctrl.js：483匹配页面：pages / auth

angular.js:10160 TypeError: a.forEach is not a function
at Object.b.makeObjectArray (ng-tags-input.min.js:1)
at ng-tags-input.min.js:1
at wrappedCallback (angular.js:11735)
at wrappedCallback (angular.js:11735)
at angular.js:11821
at Scope.$eval (angular.js:12864)
at Scope.$digest (angular.js:12676)
at Scope.$apply (angular.js:12968)
at angular.js:14494
at completeOutstandingRequest (angular.js:4413)

很明显，if语句中的行正在运行，因为我在控制台中获取了所有这些打印语句，但由于某种原因，它认为forEach不是功能...

有人对如何解决此问题有任何建议吗？

Answer 1

for...in loop遍历对象的可枚举属性名称。然后，您需要使用该属性名称访问该对象以获取该值。这是一个例子：

＆＃13;

console.log('Using for...in on an object:');

var myObj = {
  'prop1': 'Hello world!',
  'prop2': 12345,
  'some crazy property': null
};

for (var propName in myObj) {

  console.log('propName is ' + propName);

  //Now we can lookup the value using that property name.
  var propValue = myObj[propName];

  console.log('myObj[' + propName + '] is ' + propValue);

}

＆＃13;

相反，forEach loop直接遍历数组的值。您的回调函数直接提供了值，因此您无需访问该数组即可检索它。示例：

＆＃13;

console.log('Using forEach on an array:');

var myArray = [
  {key: 'this is object 1!'},
  {key: 'this is object 2!'}
];

myArray.forEach(function (obj) {
  
  console.log('in ForEach loop...');
  
  console.log('obj is ' + JSON.stringify(obj));
  
  //We can directly access the object's properties as needed
  console.log('obj.key is ' + obj.key);
  
});

＆＃13;

所以，在这里，您可以使用for...in或使用forEach更新代码：

＆＃13;

var buttonsQuery = 'pages/userpage2';

var userPages = [{
    _id: "...",
    _rev: 1,
    _url: "...",
    key: "pages/auth"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/userpage2"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/",
    value: "/pages/userpage1"
  }
]

console.log('Iterating using for...in');
for (var prop in userPages) {

  console.log('prop is ' + prop);

  //Access the page object using the property name
  var page = userPages[prop];

  console.log('page is ' + JSON.stringify(page));

  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
}


//Better way to iterate if userPages is an array:
console.log('iterating using forEach');
userPages.forEach(function(page) {

  //page is already the object we're interested in.
  //No need to access the array again.
  console.log('page is ' + JSON.stringify(page));

  //Access the object's properties as needed
  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
});

＆＃13;

您也可以使用for...of loop进行迭代，但IE中不支持。

AngularJS-如何按对象的属性/属性进行过滤 - forEach不是函数

1 个答案: