Angular - Заполнить список из файла (JSON / XML / CSV) - PullRequest
Новая
       10

Angular - Заполнить список из файла (JSON / XML / CSV)

0 голосов
/ 20 марта 2019

Контекст: Попытка создать приложение CRUD, которое читает файл из заданного поля ввода и затем заполняет список.

Что я сделал до сих пор:

-сервис (продукты.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 для имитации веб-API, который использовался в моих products.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, и я застрял.

1 Ответ

0 голосов
/ 20 марта 2019

Может быть, вы можете создать HttpInterceptor и проверить тип контента, чтобы вы могли предоставить другой анализ ответа? Проверьте этот ответ, так как он может вам помочь: https://stackoverflow.com/a/51491994/3811645

...