Как получить идентификатор через @Input и @Output в угловых

Question

Я создаю приложение в угловом формате, в котором мне нужно отправлять и получать данные как динамические.

Дочерний компонент Html :

<div class="selectDropdown">
    <div class="user-chip newChip" *ngFor="let user of userSelects">
        {{user}}
    </div>
    <input name="suggestion" type="text" id="autocomplete-input" placeholder="Type User here..." (click)="suggest()" [(ngModel)]="userSelectsString"
 id="autocomplete-input">
    <label class="fa fa-caret-down dropdownIcon"></label>

    <ul id="autocomplete-results" class="autocomplete-items" *ngIf="show">
        <li *ngFor="let selected of suggestions" [ngClass]="isSelected(selected) ? 'selected-suggestion' : ''" (click)="selectSuggestion(selected)">
            {{ selected }}
        </li>
    </ul>
</div>

дочерний TS :

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: [ './child.component.scss' ]
})
export class ChildComponent  {
  name = 'Angular';
    userSelectsString = '';
      @Input() suggestions;
  @Output() onSelected: EventEmitter<any> = new EventEmitter();
  userSelects = [];
  activeSuggestions = this.suggestions;

  show: boolean = false;

  suggest() {
    this.show = true;
  }

  isSelected(s: any) {
    return this.userSelects.findIndex((item) => item.id === s.id) > -1 ? true : false;
  }

  selectSuggestion(s): void {
    this.userSelects.find((item) => item.id === s.id) ?
      this.userSelects = this.userSelects.filter((item) => item.id !== s.id) :
      this.userSelects.push(s);
    this.show = false;
    this.userSelectsString = "";
    this.onSelected.emit(s);
  }
}

Компонент приложения Html :

<child [suggestions]="userlist" (onSelected)="OnClickUsername($event)"></child>

Компонент приложения Ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  userList: any = [{ "id": "001", "name": "mango" }, { "id": "002", "name": "apple" }, { "id": "003", "name": "banana" }, { "id": "004", "name": "pine" }, { "id": "005", "name": "orange" }, { "id": "006", "name": "chery" }, { "id": "007", "name": "watermelon" }, { "id": "008", "name": "grapes" }, { "id": "009", "name": "lemon" }];

  userlist: any = [];

ngOnInit() {
        for(let i=0; i<this.userList.length; i++) {
        this.userlist.push(this.userList[i].name);
      }
      console.log(this.userlist);
 }

   OnClickUsername(username) {
    console.log(username)
  }

}

Вот что я делаю, когда пользователь нажимает на поле ввода, отображается список элементов, в котором выбранное пользователем значение будет выводиться через @Output() onSelected: EventEmitter<any> = new EventEmitter();.Данные передаются через @Input.

Вы можете увидеть сценарий в Stackblitz: https://stackblitz.com/edit/angular-ny7dbm

Здесь с функциональностью все работает нормально.окончательно выбранное имя пользователя отображается,

   OnClickUsername(username) {
    console.log(username)
  }

Я отправляю входные данные, используя,

for(let i=0; i<this.userList.length; i++) {
this.userlist.push(this.userList[i].name);

}

Где userlist - данные, которыми я являюсьотправка как @Input.В приведенном выше примере, когда я передаю this.userList[i].name, я получаю конечный результат как имя.

Но мне нужно получить идентификатор также и в конечном результате. Потому что мне нужно получить идентификатор выбранного пользователя.список, чтобы продолжить.Но идентификатор не должен отображаться нигде.Отправка данных должна быть динамичной, потому что я могу использовать этот сценарий в любом месте, поэтому я не могу извлечь, задав {{selected.name}} (Почему, потому что здесь это имя, если я использую его в любом другом компоненте, то вместо места будет другое значениеname) ниже, я могу изменить только родительский app component для изменений данных.

<li *ngFor="let selected of suggestions" [ngClass]="isSelected(selected) ? 'selected-suggestion' : ''" (click)="selectSuggestion(selected)">
            {{ selected }}
        </li>

(т.е.) Если я выберу cherry, тогда мне нужно получить идентификатор 006 вокончательный результат.

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

Answer 1

Если я правильно понял, вы не можете изменить дочерний компонент.Вы можете попробовать отфильтровать родительский список пользователей по имени.Проблема этого решения - дублирование имен в списке

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  userList: any = [{ "id": "001", "name": "mango" }, { "id": "002", "name": "apple" }, { "id": "003", "name": "banana" }, { "id": "004", "name": "pine" }, { "id": "005", "name": "orange" }, { "id": "006", "name": "chery" }, { "id": "007", "name": "watermelon" }, { "id": "008", "name": "grapes" }, { "id": "009", "name": "lemon" }];

  userlist: any = [];

ngOnInit() {
        for(let i=0; i<this.userList.length; i++) {
        this.userlist.push(this.userList[i].name);
      }
      console.log(this.userlist);
 }

   OnClickUsername(username) {
    console.log(this.userList.find(x => x.name === username));
  }

}

Answer 2

Отправить полный userList в @ Ввод

в app.component.html

<child [suggestions]="userList" (onSelected)="OnClickUsername($event)"></child>

в вашем child.component.ts

selectSuggestion(s): void {

    this.onSelected.emit(s);
  }

и, наконец, в app.component.ts

OnClickUsername(username) {
    console.log('name => ',username.name)
    console.log('id =>', username.id)
  }

, и когда вы выберете перкулярную вещь, тогда передайте полный объект

update Stackblitz demo