角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>