मैं किसी चुने हुए आइटम के अपने दृश्य विवरण प्राप्त करने का प्रयास कर रहा हूं। ऐसा लगता है कि *ngIf कथन काम नहीं करता है। यह एक चुने हुए "व्यक्ति" के "विवरण" के बजाय एक सादा पृष्ठ प्रस्तुत करता है। परीक्षण उद्देश्यों के लिए मैंने *ngIf कथन को एक सच्चे *ngIf="1" में बदल दिया, फिर मैं पृष्ठ मार्कअप प्रदान करने में कामयाब रहा (यह काम किया!), लेकिन

{{ person.name }} and `{{ person.id }}`

काम नहीं किया। तो, ऐसा लगता है कि मेरा details.html व्यक्ति चर के बारे में कुछ नहीं जानता।

details.html घटक को सही ढंग से प्रस्तुत करने के लिए क्या किया जाना चाहिए?

person.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { IPerson } from '../persons/person';

@Injectable()
export class PersonService {
  private _personUrl = './assets/persons.json';

  constructor(private _http:Http){}

  getPersons(): Observable<IPerson[]> {
    return this._http.get(this._personUrl)
    .map((response: Response) => <IPerson[]>response.json().personsData)
  }

   getPerson(id:number): Observable<IPerson>{
    return this.getPersons()
    .map(persons => persons.find(person => person.id === id));
  }

}

details.component.html

<div *ngIf="person" class="container">
  <h3>Person Details</h3>
  <div class="col-md-12">
     <div>{{ person.name }}</div>
     <div>{{ person.id }}</div>
  </div>

  <button (click)="goBack()">Back</button>
</div>

details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { PersonService } from '../service/person.service';
import { IPerson } from '../persons/person';

@Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
  styleUrls: ['./details.component.css'] 
})
export class DetailsComponent implements OnInit {
  public person: IPerson;

  constructor(
    private _PersonService: PersonService,
    private route: ActivatedRoute
    ) { }

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
        let id = +params['id'];
        this._PersonService.getPerson(id)
    .map(person => this.person = person).subscribe();
    })
  }


}

persons.json

{
  "personsData" : [
    {
      "id": 1,
      "name": "KC"
    },
    {
      "id": 2,
      "name": "KN"
    },
    {
      "id": 3,
      "name": "DG"
    }]
 }

यूपीडी ऐसा लगता है कि समस्या details.component.ts में व्यक्ति चर है जो अपरिभाषित है, हालांकि मैंने इसे निर्यात वर्ग में घोषित किया है।

0
Alexandr Belov 23 अक्टूबर 2017, 00:00
क्या आपकी html फ़ाइल का नाम details.component.html, या details.html है? यह थोड़ा भ्रमित करने वाला है। आपके पास details.html हर जगह है, लेकिन details.component.html कंपोनेंट कोड में है।
 – 
R. Richards
23 अक्टूबर 2017, 00:09
@R.रिचर्ड्स आपको भ्रमित करने के लिए क्षमा करें। यह वास्तव में details.component.html है, बस कोड को छोटा करने के लिए ऐसा लिखा है।
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:11

2 जवाब

params की ActivatedRoute की संपत्ति एक अवलोकन योग्य लौटाती है जिसे आपको सदस्यता लेने की आवश्यकता होती है। तो हमें आपका कोड कुछ इस तरह बदलना होगा:

this.route.params.subscribe(...)

params के बजाय paramsMap का उपयोग करने की भी सलाह दी जाती है, जैसा कि इसके नाम से पता चलता है, इसके बजाय एक नक्शा लौटाएगा। तो हम इसे इसमें और बदल सकते हैं:

this.route.paramMap.subscribe(paramMap => paramMap.get('id'))

अब हम मानचित्र पर get विधि का उपयोग कर रहे हैं, इसे कुंजी पास करें, इस मामले में आपके परम का नाम और अंत में, यह मूल रूप से हमें वही परिणाम देगा।

एक और चीज जो आपके कोड में पूरी तरह से गलत है वह है map ऑपरेटर। ऑब्जर्वेबल्स के साथ काम करते समय, हम उत्सर्जित डेटा को बदलने के लिए मैप ऑपरेटर का उपयोग करते हैं। तो उदाहरण के लिए, यह अवलोकन योग्य व्यक्ति उत्सर्जित कर रहा है। यदि आप केवल उस व्यक्ति का नाम चाहते हैं, तो आप मानचित्र ऑपरेटर का उपयोग इस प्रकार करेंगे:

.map(person => person.name)

और यदि आप इस सिंटैक्स के अभ्यस्त नहीं हैं, तो यह समतुल्य है:

.map(person => {return person.name})

वांछित डेटा प्राप्त करने के बाद जो कोड चलना चाहिए, वह सबसाइब में चला जाता है, जिसमें तीन तर्क होते हैं, लेकिन हम आमतौर पर केवल पहले दो की परवाह करते हैं, जो कि सफलता और त्रुटि कॉलबैक फ़ंक्शन हैं। आपका अंतिम कोड कुछ इस तरह दिखना चाहिए:

this.route.paramMap.subscribe(params => 
    this._PersonService.getPerson(+params.get('id'))
        .subscribe((person) => this.person = person, () => {  //do something on error}))
1
Christian 23 अक्टूबर 2017, 00:37
टर्मिनल एक त्रुटि फेंकता है: 'स्ट्रिंग' प्रकार का तर्क 'संख्या' प्रकार के पैरामीटर के लिए असाइन करने योग्य नहीं है। इस लाइन के लिए: this._PersonService.getPerson(params.get('id'))
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:36
+params.get('id')
 – 
Christian
23 अक्टूबर 2017, 00:37
वह मेरा बुरा था। प्लस ऑपरेटर का मतलब अलग-अलग चीजें हैं लेकिन इस मामले में यह आपको किसी चीज का संख्यात्मक मान देता है। प्राप्त विधि के साथ प्राप्त किया गया परम हमेशा एक स्ट्रिंग ('1') होगा, और चूंकि हम इसे एक संख्या में बदलना चाहते हैं, इसलिए हम प्लस ऑपरेटर लागू करते हैं।
 – 
Christian
23 अक्टूबर 2017, 00:41
यह भी काम करना चाहिए, thnx! लेकिन ऐसा लगता है कि मेरी समस्या यह है कि मानचित्र के अंदर "व्यक्ति" चर (या आपके संस्करण में - सदस्यता लें) फ़ंक्शन अपरिभाषित है।
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:48

आपका डेटा एसिंक्रोनस है इसलिए आपको इसे प्रस्तुत करने के लिए पाइप एसिंक्स का उपयोग करना होगा:

https://angular.io/api/common/AsyncPipe

बस उस पाइप को इंटरपोलेशन में जोड़ें और यह काम करेगा।

0
Adam A 23 अक्टूबर 2017, 00:10
मैंने इसे {{ (person|async)?.title }} में बदल दिया, फिर भी काम नहीं कर रहा
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:17
तो, इंटरपोलेशन के अंदर नहीं तो पाइप का उपयोग कहां करें?
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:20
मैंने पाइप को details.component.ts में इम्पोर्ट किया, है ना? और इसे {{person.name | . के रूप में उपयोग करने का प्रयास किया एसिंक्स}}। काम नहीं कर रहा(
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:25
लेकिन क्या आपके पास व्यक्तिगत रूप से डेटा है? चलिए कंसोल लॉग इन डिटेल्स कॉम्पोनेंट इन मैप फंक्शन करते हैं।
 – 
Adam A
23 अक्टूबर 2017, 00:30
हम्म... व्यक्ति अपरिभाषित है
 – 
Alexandr Belov
23 अक्टूबर 2017, 00:39