typescript - Angular Mentions - Spara ID-värdet för de valda användarna

Med hjälp av biblioteket angular mentions implementerade jag ett textområde som låter mig nämna flera användare.

Finns det ett sätt att spara ID:n för de valda användarna? Om möjligt, spara dem som en array av strängar.

Exempel: Jag valde användare Namn 1, Namn 2, Namn 3 .... Jag vill kunna spara id:t och inte namnet. ["1", "2", "3"]

Kan någon hjälpa mig?

Tack!

Stackblitz

HTML

 <div [mention]="items" class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px" [mentionConfig]="{triggerChar:'@',labelKey:'name'}"></div>

Component.ts

 items: string[];
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (val: any[]) =>{
        this.items = val;
      } 
    )
  }

Svar #1

1- du bör först använda textarea istället för div så att du kan använda [(ngModel)] för att binda de valda användarnamnen

<textarea type="text" [mention]="items" 
 class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px" [mentionConfig]="{triggerChar:'@',maxItems:10,labelKey:'name'}" [(ngModel)]="data"></textarea>

2-skapar variabeln data för att binda all text i textrutan

3-från JSON-data kan du skapa TypeScript-klasser som representerar JSON-egenskaperna för att göra det enkelt att filtrera data

export interface Geo {
  lat: string;
  lng: string;
}

export interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

export interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

export interface RootObject {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

4-använd denna sparmetod för att få alla valda namn-id:n

 save() {
        let ids = this.data.replace(/(\r\n|\n|\r)/gm, "").split("@").filter(t => t != "" && this.items.findIndex(u => u.name == t.trim()) > -1).map(name => this.items.find(s => s.name == name.trim()).id);
  }

demo

Svar #2

Jag uppmuntrar starkt att du använder detta bibliotek fvi-angular-mentions. I fvi-angular-mentions har du möjlighet att få de valda användarna.

Biblioteket du använder har ingen eventEmitter för att få det valda användarnamnet. Det har endast 3 eventutlösare:

@Output() serchTerm EventEmitter<string>-Event that is emitted whenever the search term changes. Can be used to trigger async search.
@Output() opened EventEmitter<void>-Event that is emitted when the mentions panel is opened.
@Output() closed EventEmitter<void>-Event that is emitted when the mentions panel is closed.

Vilket tyvärr inte fungerar för dig.

Relaterade artiklar