Выберите объект для добавления в Observable в Angular со службой - PullRequest
Новая
       9

Выберите объект для добавления в Observable в Angular со службой

0 голосов
/ 18 марта 2020

У меня есть поисковая система, где пользователь может искать наркотики по нескольким меткам. 

            <tbody *ngFor="let result of searchResults.content | slice:0:99">
            <tr>
                <td>{{result.slot.number}}</td>
                <td>{{result.tradingName}}</td>
                <td>
                    <p *ngFor="let subs of result.substances">{{subs.dose}}{{subs.entity}},
                        {{subs.substance.substanceName}}</p>
                </td>
                <td>{{result.type}}, {{result.quantity}}</td>
                <td>{{birthdayToString(result.expire)}}</td>
                <td>{{result.entryDate}}</td>
                <td><button (click)="addToCard()" class="btn btn-success ml-1">Add</button></td>
            </tr>
        </tbody>

В точке «Добавить» у пользователя должна быть возможность добавить этот объект в список, а затем работать с этим объектом, который хранится в Observable в другом компоненте.

TS-файл этого html: 

constructor(private http: HttpClient, private drugService: DrugsService, private router: Router, private cardService: CardService) {
this.searchTerm.pipe(
  map((e: any) => e.target.value),
  debounceTime(700),
  distinctUntilChanged(),
  filter(term => term.length >= 1)
).subscribe(searchTerm => {
  this.loading = true;
  this._searchEntries(searchTerm);
});
}

ngOnInit() {
  this.fetchDrugs();
}

searchEntries(term: any): Observable<any> {
return this.http.get(this.drugSearch + term).pipe(
  map(response => {
    this.searchResults = response;
    //  console.log(response);
  })
)
}

  addToCard() {
  this.cardService.addDrug(({
    tradingName: "Depon",
    type: "Pill",
    quantity: 22,
    expire: new Date(),
    entryDate: new Date(),
    slot: 5
  }));
}

Прямо сейчас в моем TS-файле я жестко кодирую наркотик в addToCard ().

Но я бы хотел передать объект, на который нажимает пользователь, а не жестко закодированный. Как я могу это сделать?

Служба карточек: 

export class CardService {
drugs: Drugs = [];

public objObservable: any;
private objObserver: any;

constructor() {
    this.objObservable = new Observable((localObserver) => {
        this.objObserver = localObserver; // Convert this.objObserver from any to an observer object
        this.objObserver.next(this.drugs); // Connect this.drugs to observable object by observer
    });
}

getDrugs(): Observable<Drugs> {
    return this.objObservable;
}

addDrug(newDrug: Drug) {
    this.drugs = [...this.drugs, newDrug];
    return this.objObserver.next(this.drugs);
}

removeDrug(neo4jId: string) {
    this.drugs = this.drugs.filter((item: Drug) => item.neo4jId !== neo4jId);
    return this.objObserver.next(this.drugs);
}

clear() {
    this.drugs = [];
    this.objObserver.next.this.drugs;
}
}

Я хотел бы использовать эту службу и функцию addDrug для передачи Объекта и помещения его в Observable, но как?

Это моя модель с наркотиками, если вам нужно понять: 

export interface Drug {
neo4jId?: string;
drugId?: string;
tradingName: string;
type: string;
quantity: number;
expire: Date;
entryDate: Date;
lastModified?: Date;
slot: number;
substances?: Substance[]
};

export interface Drugs extends Array<Drug> { }

1 Ответ

1 голос
/ 18 марта 2020

Отправьте result в обработчик событий. Попробуйте следующее

Шаблон 

<button (click)="addToCard(result)" class="btn btn-success ml-1">Add</button>

Компонент 

addToCard(drug: Drug) {
  this.cardService.addDrug(drug);
}
...