Angular2从JSON数组中删除重复项

Question

当我将我的应用程序移植到Angular2时，我在JSON数组中的筛选器上遇到了问题。在Angular 1.x中这更容易。我在筛选器中使用了'unique'，这将删除所有重复项。

应用程序：

{"app":"database_1",
 "host":"my_host1",
 "ip":"00.000.00.000"
},
{"app":"database_1",
 "host":"my_host1",
 "ip":"00.000.00.000"
},
{"app":"database_2",
 "host":"my_host2",
 "ip":"00.000.00.000"
},
{"app":"database_2",
 "host":"my_host2",
 "ip":"00.000.00.000"
}

以下是html代码的一部分：

    <div *ngFor='#appsUnique of apps '>
        <div class="row dashboard-row">
            <div class="col-md-2">
               <h4>{{appsUnique.app }}</h4>
            </div>
        </div>
    </div>

结果是:

database_1
database_1
database_2
database_2

我希望获得结果：

database_1
database_2

如何从数组中删除重复项？

- notsaltydev

---

在Angular2中，过滤器被管道(Pipes)取代，一些过滤器在Angular2中不可用。您可以编写自定义的@Pipe来过滤数组。而对于数组处理，Lodash JS也是很有帮助的。 - pramod kadam

谢谢回复，我找到了类似的话题： https://dev59.com/pFsW5IYBdhLWcg3w8q_2 - notsaltydev

Answer 1

也许它可以帮助你

myList = ["One","two","One","tree"];

myNewList =  Array.from(new Set(myList ));

- ABDERRAHIME FARHANE

Answer 2

我有一个解决方案来解决这个问题 :)

Array.from(new Set([{"app":"database_1",
 "host":"my_host1",
 "ip":"00.000.00.000"
},
{"app":"database_1",
 "host":"my_host1",
 "ip":"00.000.00.000"
},
{"app":"database_2",
 "host":"my_host2",
 "ip":"00.000.00.000"
},
{"app":"database_2",
 "host":"my_host2",
 "ip":"00.000.00.000"
}].map((itemInArray) => itemInArray.app)))

了解更多关于 Array.from 和 Set

感谢大家的帮助 :)

- notsaltydev

Answer 3

您可以使用以下方法：

names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];

ngOnInit() {
    let filteredNames=this.remove_duplicates(this.names);
    console.log(filteredNames);
    console.log(this.names);
}
remove_duplicates(arr) {
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
        obj[arr[i]] = true;
    }
    arr = [];
    for (let key in obj) {
        arr.push(key);
    }
    return arr;
}

希望这能有所帮助。

- Bhushan Gadekar

Answer 4

你也可以使用Observable方法，这非常简单。

let filteredData = [];
let arrayData = [{
  "app": "database_1",
  "host": "my_host1",
  "ip": "00.000.00.000"
},
{
  "app": "database_1",
  "host": "my_host1",
  "ip": "00.000.00.000"
},
{
  "app": "database_2",
  "host": "my_host2",
  "ip": "00.000.00.000"
},
{
  "app": "database_2",
  "host": "my_host2",
  "ip": "00.000.00.000"
}];

Observable.merge(arrayData)
  .distinct((x) => x.app)
  .subscribe(y => {
    filteredData.push(y)
    console.log(filteredData)
  });

- Dimuthu

---

我也想从对象数组中通过比较特定的对象变量获取唯一的对象。我尝试了所有可用的解决方案，但只有这个对我起作用。谢谢。 - Nishant Singh

Answer 5

不必循环常规的JSON数组，您可以在相应的TypeScript类中创建另一个数组，并根据需要进行修改。在您的HTML中，您可以使用以下内容：

HTML

 <div *ngFor='let appsUnique of filteredApps'>
    <div class="row dashboard-row">
        <div class="col-md-2">
           <h4>{{appsUnique.app }}</h4>
        </div>
    </div>
</div>

接下来，您需要在相应的 TypeScript 类中使用这个 filteredApps 数组。

TypeScript

 let filteredApps = [];

在一个函数中，你可以创建过滤后的应用程序，例如在onInit方法中。

onInit()
{
    filteredApps = // filter logic
}

- Dylan Meeus

Answer 6

你需要trackBy。

尝试使用：

*ngFor="#appsUnique of posts;trackBy:appsUnique?.app"

希望有所帮助。

- alejandromav

---

我尝试使用 trackBy，但没有成功。你可以在这里尝试一下：https://fiddle.jshell.net/1y0tw6zf/53/ - Gopinath Shiva

trackBy在beta 3中被添加。也许您正在使用旧版本。推文 - alejandromav

我使用的是angular2-2.0.0-beta.15版本，当我使用您的代码(*ngFor="#appsUnique of apps;trackBy:appsUnique?.app)时，结果与一开始相同。 - notsaltydev

你可以在这里查看更多细节：http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html - alejandromav