Question

上下文：尝试构建一个CRUD应用程序，该应用程序从给定的输入字段中读取文件，然后填充列表。

到目前为止我所做的：

-service（products.service.ts）：

 @Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http : HttpClient) { }

  private productsUrl= 'api/products';

  private handleError<T>(operation ='operation', result?: T){
    return (error: any): Observable<T> =>{
      console.log(error,'Operation : ${operation}');
      return of (result as T);
    }
  }      
  updateProduct(product: Product): Observable<any>{
      return this.http.put(this.productsUrl,product,httpOptions)
        .pipe(
          tap(_ => console.log(`Updated product of id ${product.id}!`)),
          catchError(this.handleError<any>('updateProduct'))
        )
    }

 addProduct(product: Product): Observable<Product> {
      return this.http.post<Product>(this.productsUrl, product, httpOptions).pipe(
        tap((product: Product) => console.log(`Added product with id ${product.id}!`)),
        catchError(this.handleError<Product>('addProduct'))
      );
    }
  (....)
}

我使用了in-memory-service-web-api模拟了我的产品中使用过的web api.service.ts

接下来，进入使用该服务的类：

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {

  products : Product[] ;

  selectedProduct :  Product;
  constructor(private productService : ProductService) { }

  onSelectProduct(product){
    this.selectedProduct = product;
    this.productService.getProduct(2)
      .subscribe(product =>console.log(product));
  }

  ngOnInit() {
    this.getProducts();
  }
  save(product): void {
    this.productService.updateProduct(product)
      .subscribe(()=>console.log('Product saved!'))
  }
  add(name : string, price: number) : void {
    this.productService.addProduct({name,price} as Product)
      .subscribe(product =>{
        this.products.push(product);
      });
  }
(...)
    }

此外，与该类关联的模板：

(...)
<ul>
    <li 
    class="product" 
    [class.selected]="selectedProduct && selectedProduct.name === product.name"
    *ngFor="let product of products"
    >
        <input type="text" pInputText [(ngModel)]="product.name"/>
        <div (click)="onSelectProduct(product)">Name : {{product.name }}</div>
        <div>ID : {{product.id }}</div>
        <div>Price : {{product.price }}</div>
        <button (click)="save(product)" pButton type="button" label="Save" class="ui-button-success"></button>
        <button (click)="delete(product.id)" pButton type="button" label="Delete" class="ui-button-raised ui-button-danger"></button>
    </li>
  </ul>
(...)

正如标题所示，我正在尝试从可以是任何格式（不仅是JSON）的文件中读取并填充我的列表。我该怎么做？我正在尝试学习Angular并且被卡住了。

Answer 1

也许您可以构建HttpInterceptor并检查内容类型，以便为响应提供不同的解析？请检查此答案，因为它可能会对您有所帮助：https://stackoverflow.com/a/51491994/3811645

角度-从文件（JSON / XML / CSV）填充列表

1 个答案: