角2 - 鼠标点击时显示阵列基于价值

Question

我工作的一个角2项目，我用一个以.json文件看起来像这样的工作：

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

我已成立了一个服务，得到这个文件看起来像这样：

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有表单输入，看起来像这样：

<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 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”将显示并包含'DefaultPromptText'。

希望是有道理的。请让我知道你是否需要我进一步解释。

非常感谢

Answer 1

你可以用** 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>