时间戳

首页 > 解决方案 > Angular Mentions - 保存所选用户的 ID 值

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

问题描述

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

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

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

谁能帮我？

谢谢！

堆栈闪电战

HTML

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

组件.ts

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

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

图片

标签： angulartypescript

解决方案

1-您应该首先使用 textarea 而不是 div 以便您可以使用 [(ngModel)] 绑定选定的用户名

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

3-从 json 数据中你可以创建 typescript 类来表示 json 属性，以便于数据过滤

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-使用此保存方法获取所有选定的名称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);
  }

演示

推荐阅读