Question

我正在构建一个angular的应用程序，在其中我需要以动态方式发送和接收数据。

子组件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时，我得到的最终结果是名称。

但是我还需要在最终结果中获取ID。因为我需要获取所选用户列表的ID才能继续进行。但是id不应显示在任何地方。数据的发送应该是动态的，因为我可以在任何地方使用此方案，因此我不能通过给出{{selected.name}}来进行获取（为什么，因为这是名称，如果我在其他任何组件中使用它，则name）在下面的位置，我只能更改父级app component进行数据更改。

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

（即）如果我选择cherry，那么我需要在最终结果中获得ID 006。

请帮助我实现在用户选择中获取ID和用户名的结果。

Answer 1

在 @Input

中发送完整的 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)
  }

当您选择垂直物体时，则传递完整的物体

更新Stackblitz演示

Answer 2

如果我理解正确，则不能更改子组件。您可以尝试按名称过滤父userList。此解决方案的问题-列表中的名称重复

root

如何通过@Input和@Output以角度获取ID

2 个答案: