地图如何在角度上进行观察

Question

我想将映射到一个可观察的角度，以获取我从 api 使用的对象（数组）的属性，因为我想在该数组中进行验证以了解是否更新/创建记录.

下午好，我想做一个查询，我通过 observable 进行 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，它是 subscribe 方法的第一个参数，你会在那个函数之外使用吗？既然是有问题的安排，我向你提到它是因为我需要为我得到的可观察对象制作一个映射，我只获得对象的一个​​属性，也就是说，我只想把这个属性带给我，并且然后使用此对象或数组进行检查。当我想更新/创建记录时，因为取决于 ID 是否已经在数组中，记录将被更新，否则将被创建。

我也不知道如何将地图应用于我的 observable，如果您能帮助我，我将不胜感激。

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

PD：getAllEquipos() 函数在服务文件中，而 RenderDataTable() 函数在组件中

Answer 1

由于我不知道您的创建/更新代码是什么样的，我将把它作为一个函数来执行，如果项目已经存在，则返回 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);
    }
}

Answer 2

您可以在服务的 getAllEquipos() 方法或组件的 RenderDataTable() 方法中应用 rxjs map 运算符。无论哪种情况，您都需要pipe 和map 运算符。

map 会自动将转换函数返回的值包装在一个 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);  
    });

}