Question

我有一个对象：

export var PROJECT: any = {
    id: "1",
    name: "Hunkemoller",
    teammembers: [
        {
            id: 1,
            name: "Sarah Johnson",
            firstname: "Sarah",
            role: "Manager"
        },
        {
            id: 2,
            name: "Christian Johnson",
            firstname: "Christian",
            role: "Employee"
        }

等

我正在制作应用，我想在其中添加搜索元素，以便您可以搜索不同的团队成员。我想初始化所有属性＆＃39; name＆＃39;每个团队成员。这是唯一需要过滤的东西。

我想到了两种方式：

创建一个仅包含项目名称的新数组＆gt;团队成员在里面。
只需初始化名称即可。但是我没有成功。

你能帮我做出正确的选择并向我解释我如何才能成功吗？我现在甚至不知道如何从现有阵列中制作新阵列。我在想这样的事情：

var teamMembers = project.teammembers.name();

但除了那个选项之外，如果我只能在对象中使用name属性，那将是最好的。

我到目前为止（我使用的是Ionic 2 / Angular 2）

<ion-searchbar (ionInput)="getTeammembers($event)" [(ngModel)]="searchQuery"></ion-searchbar>
<ion-list>
   <ion-item *ngFor="let teammember of project.teammembers">
       {{ teammember.name }}
   </ion-item>
</ion-list>

在我的打字稿文件中，我有以下内容：

  initializeTeammembers() {
    this.project.teammembers;
  }

  getTeammembers(ev) {
    // reset teammembers back to all of the teammembers
    this.initializeTeammembers();

    // set val to the value of the searcbar
    let val = ev.target.value;

    // if the value is empty string, don't filter teammembers
    if (val && val.trim() != '') {
      this.project.teammembers.name = this.project.teammembers.name.filter((teammember) => {
        return (teammember.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

但它不起作用。我收到错误：无法读取属性＆＃39; filter＆＃39;未定义的。

有人请求帮助我吗？提前谢谢。

Answer 1

您可以使用Array.prototype.map创建一个新的不同数组：

var teamMembers = project.teammembers.map(function(item){ return item.name });

＆＃13;

var project = {
    id: "1",
    name: "Hunkemoller",
    teammembers: [
        {
            id: 1,
            name: "Sarah Johnson",
            firstname: "Sarah",
            role: "Manager"
        },
        {
            id: 2,
            name: "Christian Johnson",
            firstname: "Christian",
            role: "Employee"
        }
      ]
   };

console.log(project.teammembers.map(function(item){ return item.name }));

＆＃13;

更好的方法是创建pipe，使用Array.prototype.filter过滤结果。

Answer 2

它不应该是this.project.teammembers.name而应该this.project.teammembers，然后在结果过滤器中使用teammebers.name

if (val && val.trim() != '') {
      this.project.teammembers.name = 
                    this.project.teammembers.filter((teammember) => {
        return (teammember.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }

或者你可以试试这样的东西来过滤这个名字......

this.project.teammembers.name = this.project.teammembers.filter(function(el) {
    return (el.name === val.toLowerCase());
}).map(function(el) {
    return el.firstname;
}).sort();

所以基本上你是通过名称过滤然后如果你想要一个新的数组，其第一个名字按排序顺序排列......你可以做map和sort

Answer 3

或使用下划线_.map（）http://underscorejs.org/#map

var teamMembers = _.map(project.teammembers, function(item){ 
   return item.name 
});

Answer 4

最终我成功了。我从一开始就从硬编码数组开始，从现有对象中获取项目。

对于有同样问题的人，这是我的最终代码：

HTML：

   <ion-searchbar (ionInput)="getNames($event)"></ion-searchbar>
   <ion-list>
      <ion-item *ngFor="let name of names">
         {{ name }}
      </ion-item>
   </ion-list>

打字稿：

export class Page1 {
    names;
}

constructor () {
    this.initializeNames();
}

initializeNames() {
    this.names = this.project.teammembers.map(function(item){ return item.name }); // Thanks a lot Amir for this !
  }

getNames(ev) {
    // Reset items back to all of the items
    this.initializeNames();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.names = this.names.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

我认为project.teammembers.name有点问题。现在，通过名称＆＃39;的新变量，它成功了。非常感谢你的帮助！

从现有属性创建新数组

4 个答案: