地圖如何使角度可觀察

Question

我想在角度上建立一個可觀察的映射，以獲取我從api消耗的對象（數組）的屬性，因為我想在該數組中進行驗證以了解是否更新/創建記錄。

下午好，我想進行查詢，通過可觀察的方式進行http查詢，如下所示：

public getAllEquipos() : Observable<Equipos[]> {
      return this.http.get<Equipos[]>(this.baseurl + 'equipos')
  }

然后，我在角度材質的數據表中使用此數據：

RenderDataTable() {   

  this.service.getAllEquipos().subscribe(  
    (res) => {  
      this.dataSource = new MatTableDataSource();  
      this.dataSource.data = res;  
    //  console.log(this.dataSource.data);
    //  this.dataSource.sort = this.sort; 
      this.dataSource.paginator = this.paginator;
       console.log(res)      
    },  
    (error) => {  
      console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
    });

}

我要問的一個問題，是否可能是變量res，這是訂閱方法的第一個參數，您會在該函數之外使用嗎？ 由於這是有問題的安排，因此我向您提及它是因為我需要對可觀察對象進行映射，使我只能獲取對象的屬性，也就是說，我只想將該屬性帶給我，並且然后使用此對象或數組進行檢查。 當我要更新/創建記錄時，由於ID是否已在數組中，因此將更新記錄，否則將創建記錄。

我也不知道如何將地圖應用於我的可觀察對象，如果您能幫助我，我將不勝感激。

` Observable <Equipos[]>: in this case <Equipos[]> is an interface `

PD：getAllEquipos（）函數在服務文件中，而RenderDataTable（）函數在組件中

Answer 1

您可以在服務的getAllEquipos（）方法中或組件的RenderDataTable（）方法中應用rxjs map運算符。 無論哪種情況，都需要使用pipe和map運算符。

map會自動將從transform函數返回的值包裝到一個observable中，以便它繼續返回observable進行附加鏈接或直接預訂。

import {pipe} from 'rxjs'
import {map} from 'rxjs/operators'

//at the service
public getAllEquipos() : Observable<Equipos[]> {
      return this.http.get<Equipos[]>(this.baseurl + 'equipos')
                                    .pipe(
                                          map(res => res.targetProperty)                                                                    

  }

//in your component
RenderDataTable() {   

  this.service.getAllEquipos().pipe(map(res => res.targetProperty)).subscribe(  
    (res) => {
      this.dataSource = new MatTableDataSource();  
      this.dataSource.data = res;  
    //  console.log(this.dataSource.data);
    //  this.dataSource.sort = this.sort; 
      this.dataSource.paginator = this.paginator;
       console.log(res)      
    },  
    (error) => {  
      console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
    });

}

Answer 2

由於我不知道您的創建/更新代碼是什么樣子，因此我將其作為返回true如果該項目已經存在）的函數來true 。 我假設您的Equipos類包含一個數字id屬性，該屬性唯一標識每個項目。

@Component()
class TableComponent {

    private existingIds: number[] = []; // initialize with empty array to avoid errors in itemExists

    RenderDataTable() {
        this.service.getAllEquipos().subscribe(  
            (res) => {
                this.dataSource = new MatTableDataSource();  
                this.dataSource.data = res;  
                //  console.log(this.dataSource.data);
                //  this.dataSource.sort = this.sort; 
                this.dataSource.paginator = this.paginator;
                console.log(res);

                // res is an array, so use map function to extract an array of id properties
                this.existingIds = res.map(item => item.id);
            },  
            (error) => {  
                console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
            });
    }

    private itemExists(id: number) {
        return this.existingIds.includes(id);
    }
}