洗掉APIAngular中的重復項

一旦沒有像 1,2 這樣的重復項，我就嘗試列印 userId，不需要 1,1,2。我在代碼中試過這個，但它不起作用 - 有什么幫助嗎？

我只是初學者

這是列印輸出的螢屏截圖：

重復

[
  {
    userId: 1,
    id: 1,
    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    userId: 1,
    id: 2,
    title: "qui est esse",
    body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    userId: 2,
    id: 12,
    title: "in quibusdam tempore odit est dolorem",
    body: "itaque id aut magnam praesentium quia et ea odit et ea voluptas et sapiente quia nihil amet occaecati quia id voluptatem incidunt ea est distinctio odio"
  }
]

這是我的組件 html：

<ul class="list">
  <li class="list-group" *ngFor="let title of dataArray">
      <div class="d-flex justify-content-between group-name" >
          <p>{{title.userId}}</p>
          <div>
              <i class="far fa-file-plus px-2"></i>
              <i class="far fa-trash-alt"></i>
          </div>
      </div>
  </li>
</ul>

這里是我從 jsonplace 持有者呼叫資料的 api：

  constructor( private http:HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      data =>{
        this.dataArray = data
      }
    )
  }

uj5u.com熱心網友回復：

最簡單的方法是userId使用find()過濾掉唯一的。

var dataArray = [{ userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto" }, { userId: 1, id: 2, title: "qui est esse", body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla" }, { userId: 2, id: 12, title: "in quibusdam tempore odit est dolorem", body: "itaque id aut magnam praesentium quia et ea odit et ea voluptas et sapiente quia nihil amet occaecati quia id voluptatem incidunt ea est distinctio odio" }]

let dataToPrint = []

for (let data of dataArray) {
  if (!dataToPrint.find((existingData) => existingData.userId == data.userId))
    dataToPrint.push(data);
}

console.log(dataToPrint)

以上是一個運行示例。您可以在訂閱中使用它：

public dataToPrint = [];
constructor( private http:HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      data =>{
        this.dataArray = data

        for (let data of dataArray) {
            if (!dataToPrint.find((existingData) => existingData.userId == data.userId))
                dataToPrint.push(data);
        }
    )
  }

<ul class="list">
  <li class="list-group" *ngFor="let title of dataToPrint">
      <div class="d-flex justify-content-between group-name" >
          <p>{{title.userId}}</p>
          <div>
              <i class="far fa-file-plus px-2"></i>
              <i class="far fa-trash-alt"></i>
          </div>
      </div>
  </li>
</ul>

標籤：有角的 打字稿

上一篇：多表單輸入AngularCLI：12.2.13

下一篇：如何根據先前的欄位輸入角度更改驗證