Блог

Я столкнулся с этой проблемой. У меня есть интерфейс, в котором есть два поля, используемые для поиска

 export interface searchClass {   text: string;   id: number; }  

Я использую этот интерфейс в своем компоненте, который определен следующим образом

 searchClass$: Observablelt;searchClass[]gt; = new Observable();    

и к нему привязаны значения из api.

 this.searchClass$ = this.getSearchClass();  

Моя проблема в том, что в html-шаблоне я хочу отображать только текст и привязывать только один массив значений полей, но затем, когда компонент активируется, я хочу иметь идентификаторы этих текстовых полей. Как этого добиться?

Я пытался сделать что-то вроде этого,

 lt;div *ngIf="(searchClass$ | async)?.text as myValues"gt;  lt;myComponent   [values] = myValuesgt;  (output) = setIds($event)gt;  lt;/myComponentgt; lt;/divgt;  

но из этого ничего не вышло, потому [values] что так и не было назначено. Я придумал, просто создав 2 наблюдаемых объекта, по одному для обоих полей и один только для текста, вот так

 this.getSearchClass().subscribe(data =gt; {  this.searchClass$ = new Observable((subscriber) =gt; {  subscriber.next(data);  subscriber.complete();  });  const names = data.map(element =gt; element.text);  this.searchText$ = new Observablelt;string[]gt;(subscriber =gt; {  subscriber.next(names);  subscriber.complete();  });  

тогда просто создайте html-шаблон, подобный этому

 lt;divgt;  lt;myComponent   [values] = "searchText$ | async"  (output) = setIds($event)gt;  lt;/myComponentgt; lt;/divgt;  

И управляйте выходным массивом таким образом, чтобы назначать идентификаторы выделенного текста

 setIds(text: string[]) {  this.searchClass$.subscribe(search =gt; {  someOtherField = search  .filter(element =gt; text.includes(element.text))  .map(element =gt; element.id);  

Но я думаю, что это неэффективно, и должен быть способ сделать это без создания 2 наблюдаемых объектов.

Попробуйте это:

 lt;div *ngIf="searchClass$ | async as myValues"gt;  lt;myComponent   [values] = myValuesgt;  (output) = setIds($event)gt;  lt;/myComponentgt; lt;/divgt;  setIds(myValueSelected: searchClass) {  this.someOtherField = myValueSelected.id; }  

И в вашем компоненте «миКомпонент» у вас должна быть входная переменная, чтобы получить «myValues» и некоторые, чтобы» излучать » выбранное значение, и логика выбора, что-то вроде:

 @Input()  values!: searchClass;  @Output() output: EventEmitterlt;searchClassgt; = new EventEmitter();  // Some treatment in your myComponent // When you get the select searchClass, you have to emit it.  // For instance (just as an example if you finally selected the first Class of values): const mySelectSearchClass = values[0];  this.output.emit(mySelectSearchClass);