2角度 - 値

Question

に基づいてのOnClickショー配列Iは角2プロジェクトに取り組んでいると私はこのようになります.jsonファイルで働いている：私はそのサービスを設定している

{ 
    "PropertyName": "Occupation", 
    "DefaultPromptText": "occupation text", 
    "ValuePromptText": { 
     "WebDeveloper": "for web developer", 
     "Administrator": "for admin" 
    } 
}, 
{ 
    "PropertyName": "FirstName", 
    "DefaultPromptText": "first name text", 
    "ValuePromptText": "" 
} 

このようになります。このファイルを取得します：

<fieldset class="one-quarter sm-padding"> 
<label>First name</label> 
<input name="FirstName" placeholder="Firstname" type="text" tabindex="1" required> 
</fieldset> 

<fieldset class="one-quarter sm-padding"> 
<label>Occupation</label> 
<input name="Occupation" placeholder="Occupation" type="text" tabindex="2" required> 
</fieldset> 

<div class="prompt-bubble active md-padding bottom-sm-margin"> 
<h2>Help Text</h2> 
<ul> 

    <li *ngFor="let promptText of promptTexts"> 

     <p>{{promptText.DefaultPromptText}}</p> 

    </li> 

</ul> 

</div> 

component.tsファイルI：

import { Injectable } from "@angular/core"; 
import { Http } from '@angular/http'; 
import 'rxjs/Rx'; 

@Injectable() 
export class PromptService { 

constructor(private http: Http) { } 

fetchPrompts() { 
    return this.http.get('/temp.json').map(
     (Response) => Response.json() 
    ); 
} 

} 

私のHTMLは次のようになりますフォーム入力を持っていますSこの：私は何をしようとしている

import { Component, OnInit } from '@angular/core'; 
import { PromptService } from '../../services/prompt.service'; 

@Component({ 
selector: 'home', 
templateUrl: './home.component.html', 
styleUrls: ['./home.component.css'], 
providers: [PromptService] 
}) 

export class HomeComponent implements OnInit { 


promptTexts = []; 

constructor(private promptService: PromptService) { } 

ngOnInit() { 
    this.promptService.fetchPrompts().subscribe(
     (data) => this.promptTexts = data 
    ); 
} 

} 

は「姓」入力は 'で、配列をクリックすると、すなわち場合は、「PropertyName意味」の値が入力された名前と一致した場合に基づいて、特定の配列を示すことです"FirstName"に等しいPropertyName 'が表示され、' DefaultPromptText 'が含まれます。

希望は意味があります。さらに何かを説明する必要があるかどうか、私に知らせてください。

どうもありがとうございました

Answer 1

あなたはEDIT ** ngIf *

<input name="FirstName" [(ngModel)]="firstName" placeholder="Firstname" type="text" tabindex="1"> 

と

<ul *ngIf="yourFetchData && firstName === promptTexts.PropertyName"> 
    <li *ngFor="let promptText of promptTexts"> 
     <p>{{promptText.DefaultPromptText}}</p> 
    </li> 
</ul> 

<ul *ngIf="!yourFetchData || firstName !== promptTexts.PropertyName"> 
    <li *ngFor="let promptText of promptTexts"> 
     <p>{{promptText.DefaultPromptText}}</p> 
    </li> 
</ul> 

で試すことができます：promptTextsがオブジェクトです。だからあなたはそれで* ngForをすることはできません。

ので交換してください：

<li *ngFor="let promptText of promptTexts"> 
     <p>{{promptText.DefaultPromptText}}</p> 
    </li> 

を

<p>{{promptTexts.DefaultPromptText}}</p> 

EDIT2で、リストがある場合：

<ul> 
    <li *ngFor="let promptText of promptTexts"> 
     <p>{{firstName === promptText.PropertyName?promptText.DefaultPromptText:'whatever'}}</p> 
    </li> 
</ul>