如何獲得特定的值在一個詞典在角2的HTML

Question

我有一本詞典<key, value>，並且想要訪問html中的特定key的值。這是可能的方式？

export interface ICollection<T> { 
    add(key: number, value: T); 
    containsKey(key: number): boolean; 
    item(key: number): T; 
    keys(): number[]; 
    values(): T[]; 
} 

export class Collection<T> implements ICollection<T> { 
    private items: { [index: number]: T } = {}; 

    public containsKey(key: number): boolean { 
     return this.items.hasOwnProperty(key); 
    } 

    public add(key: number, value: T) { 
     this.items[key] = value; 
    } 

    public item(key: number): T { 
     return this.items[key]; 
    } 

    public keys(): number[] { 
     var keySet: any[] = []; 

     for (let item in this.items) { 
      if (this.items.hasOwnProperty(item)) { 
       keySet.push(item); 
      } 
     } 

     return keySet; 
    } 

    public values(): T[] { 
     var values: T[] = []; 

     for (var prop in this.items) { 
      if (this.items.hasOwnProperty(prop)) { 
       values.push(this.items[prop]); 
      } 
     } 

     return values; 
    } 
} 

export const FIELDS = new Collection<String>(); 

FIELDS.add(100002, "First Name"); 
FIELDS.add(10003, "Last Name",); 
FIELDS.add(100032, "Contact ID",); 

現在我想在我的HTML模板，訪問值FirstName事情是這樣的：

<div class="form-group row col-md-6"> 
     <label for="firstName" class="col-sm-6 col-form-label">First Name</label> 
     <div class="col-sm-6"> 
      <input id="firstName" class="form-control" [ngModel]="FIELDS['100002']" readonly/> 
     </div> 
    </div> 

是否有一種方式來獲得訪問？

在此先感謝！

Answer 1

您的HTML讀取範圍是組件的範圍。因此，您只需將FIELDS分配爲組件的成員即可。

import { Component } from '@angular/core'; 
import { FIELDS } from './wherever-you-export-fields-from'; 

@Component({ 
    templateUrl: 'your.html' 
}) 
export class DemoComponent { 
    const FIELDS = FIELDS; 
} 

然後您可以使用[ngModel]="FIELDS['100002']"。