地图如何使角度可观察

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);
    }
}