Angular 2-基于值的OnClick显示数组

Question

I'm working on an Angular 2 project and i'm working with a .json file that looks like this:

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

I have set up a service that gets this file which looks like this:

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()
    );
}

}

My html has form inputs which looks like this:

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

The component.ts file is this:

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
    );
}

}

What i'm trying to do is to show a specific array based on if the 'PropertyName' value matches the input name, ie if the 'FirstName' input is clicked the array with the 'PropertyName' that is equal to "FirstName" will show and include the 'DefaultPromptText'.

Hope that makes sense. Please let me know if you need me to explain anything further.

Thanks very much

Answer 1

You can try with **ngIf*

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

and

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

EDIT: promptTexts is an object. So you can't do an *ngFor with it.

so replace:

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

by

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

EDIT2; If you have a list:

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