角型HTMLコンポーネントのキーに基づいてTypescript配列コレクションを照会

Question

角型2と型スクリプトから始めました。

テーブルにデータを表示したい。表示したい値の1つは、別のテーブルのID（キー）です。そのIdを示す代わりに私はその名前を示したいと思う。

検索私はこのSOの質問でTypeScriptでそれを行う方法を見つけました：Querying Typescript array collection based on key。

私が最初に答えをコピーして、私のHTMLコンポーネントに追加しています

<div class="col-md-1">{{codeTypes.find(c => c.codeTypeId == level.codeType)[0].name}}</div> 

しかし、私は{{で構文エラーを取得します。

export interface ICodeType { 
    codeTypeId: number; 
    name: string; 
} 

：

public codeTypes: ICodeType[]; 

そしてICodeTypeのように宣言されています。

codeTypes.find(c => c.codeTypeId == level.codeType)[0].name 

codeTypes TSクラスのパブリックプロパティです：私は{{と}}を削除した場合、私はこれだけはHTMLで見ます

codeTypesの配列を検索して同じものを検索したいcodeTypeId私は持っています代わりにそのnameを表示します。 HTMLコンポーネントの中でどうすればいいですか？

Answer 1

角度テンプレートの構文では、javascriptと同じではなく、その部分集合であるため、同じことを行うことはできません。実際には、補間構文（{} - 中括弧）と衝突する可能性があるので、ラムダは許されません。 Pipeを使用するか、コンポーネントのクラスのメソッドを呼び出して、テンプレート内で行う代わりにクエリを実行してみてください。あなたは、この使用してパイプを実装することができ

<div class="col-md-1">{{ queryArray() }}</div> 

Answer 2

：HTMLで

queryArray() { 
    return this.codeTypes.find(c => c.codeTypeId == this.level.codeType)[0].name 
} 

：私はstrionglyメソッドを使用してパイプ

をお勧めします。

HTML：

<table class="table table-responsive table-hover"> 
<tr> 
    <th>District</th> 
</tr> 
<tr *ngFor="let item of records | slice:0:5 | category: searchText"> 
    <td>{{item.DistrictName}}</td> 
</tr> 
</table> 
<input type="text" [(ngModel)]="searchText" class="form-control" 
placeholder="Search By Id" /> 

category.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'category' }) 

export class CategoryPipe implements PipeTransform { 
    transform(categories: any, searchText: any): any { 
    if(searchText == null) return categories; 

    return categories.filter(
     function(category){ 
     return category.id.toLowerCase().indexOf(searchText.toLowerCase()) > -1; 
     } 
    ) 
    } 
} 

はtypescriptですファイル内のパイプ

import {CategoryPipe} from './category.pipe'; 


and then 
export class CheckListComponent implements OnInit { 
records: Array<any>; 
this.records= [ 
{ DistrictName: "Ariyalur", id: "1" }, 
{ DistrictName: "Chennai", id: "2" }, 
{ DistrictName: "Coimbatore", id: "3" }, 
{ DistrictName: "Cuddalore", id: "4" }, 
{ DistrictName: "Dharmapuri", id: "5" }, 
{ DistrictName: "Dindigul", id: "6" }, 
{ DistrictName: "Erode", id: "7" }, 
]; 

とapp.module.tsでそれを宣言する必要が含ま

import {CategoryPipe} from './category.pipe'; 


@NgModule({ 
declarations: [ 
AppComponent, 
CategoryPipe 
],