Angular Mentions - 保存所选用户的 ID 值

Question

在 Angular 提及库的帮助下，我实现了一个允许我提及多个用户的文本区域。

有没有办法保存选中用户的ID？如果可能，将它们保存为字符串数组。

示例:我选择了用户姓名 1、姓名 2、姓名 3 ....我希望能够保存 ID 而不是姓名。 [“1”、“2”、“3”]

谁能帮帮我？

谢谢!

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;
      } 
    )
  }

Answer 1

1- 你应该首先使用 textarea 而不是 div 这样你就可以使用 [(ngModel)] 来绑定(bind)选定的用户名

<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-创建变量数据绑定(bind)textarea中的所有文本

3-您可以从 json 数据创建代表 json 属性的 typescript 类，以便于进行数据过滤

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-使用这个save方法获取所有选中的名字id

 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