angular - 如何创建带有 Angular 键/值对的字典？

Question

使用概念字典我想做以下任务。

1. Closed
2. Open
3. Cancelled
4. Rejected
5. Saved
6. Draft
7. Pending Approval

这就是不同的状态。现在我的 table 如下

 Purchase Order            Status
 PO1                       closed
 PO2                       pending_approval
 PO3                       open
 PO4                       Draft
 PO5                       Cancelled
 PO6                       Rejected
 PO7                       Saved

现在我需要每个 状态 不同颜色使用 徽章

使用的方法是字典方法。

谁能告诉我什么是字典法？(简要解释)

也请给我解决方案

Answer 1

来自 的礼貌康拉德·鲁道夫 answer
Dictionary 是 “correct” name接口(interface)的(= ADT )，即将(通常是唯一的)键映射到(不一定是唯一的)值的关联容器。
总结一下:字典是将键映射到值的 ADT。这个 ADT 有几种可能的实现方式，哈希表就是其中之一。 Hash用词不当，但在上下文中，它相当于根据哈希表实现的字典。
解决方案 1
您可以直接使用 Map 键入作为推荐

    //Using Map
    let map = new Map<string, string>();

    map.set("PO1", "closed"); 
    map.set("PO2", "pending_approval");
    map.set("PO3", "open");
    map.set("PO4", "Draft");
    map.set("PO5", "Cancelled");
    map.set("PO6", "Rejected");
    map.set("PO7", "Saved");
    
    //get item
    console.log(map.get('PO1'));
    console.log(map.get('PO5'));
    
    //has item
    console.log(map.has('PO1'));
    console.log(map.has('PO5'));
    
    //delete item
    console.log(map.delete('PO1'));
    console.log(map.delete('PO5'));

解决方案 2
但是，如果您想要自定义其他方法，您还可以在 typescript 中创建 Dictionary 实现，如下所示

    //Using Dictionary
    let dict = new Dictionary();
   
    dict.set("PO1", "closed"); 
    dict.set("PO2", "pending_approval");
    dict.set("PO3", "open");
    dict.set("PO4", "Draft");
    dict.set("PO5", "Cancelled");
    dict.set("PO6", "Rejected");
    dict.set("PO7", "Saved");
    
    //get item
    console.log(map.get('PO1'));
    console.log(map.get('PO5'));

    //has item
    console.log(map.has('PO1'));
    console.log(map.has('PO5'));

    //delete item
    console.log(map.delete('PO1'));
    console.log(map.delete('PO5'));

字典.ts

    export class Dictionary {
      items = {};
      constructor() {
        this.items = {};
      }
      public has(key) {
        return key in this.items;
      }
      public set(key,value) {
        this.items[key] = value;
      }
      public get(key) {
        return this.items[key];
      }
      public delete(key) {
        if( this.has(key) ){
          delete this.items[key]
          return true;
        }
        return false;
      }
    }

Working Demo