मैं कुल वेब डेवलपर नोब हूं और किसी तरह मुझे इन रिपोर्टों को तैयार करने के लिए कुछ कोणीय लिखने का काम सौंपा गया है, हालांकि मुझे नहीं पता कि मैं क्या कर रहा हूं (मूल रूप से मेरा नियोक्ता यह देखना चाहता है कि क्या वे एक नया किराया बनाने से बच सकते हैं यदि वे कर सकते हैं उससे बचिए)। यहाँ मेरी घटक.ts फ़ाइल है:

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  MyDataObject: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:54499/MyRoute/GetMyData")
      .subscribe(response => {
        console.log(response);
        this.MyDataObject = response;
      });
  }
}

जहां GetMyData एंडपॉइंट मूल रूप से निम्नलिखित क्वेरी चलाता है:

Select Top 20 CustomerId, FirstName, LastName, Address, PhoneNumber, Created From Customers Order by Created Desc

मैं निम्नलिखित template.html फ़ाइल के साथ JSON के रूप में पृष्ठ पर डेटा वापस कर सकता हूं:

<div style="background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12); padding: 16px 8px 0 8px">
    <table>
        <tr>
            <td>{{MyDataObject|json}}</td>
        </tr>
    </table>
</div>

मैं तालिका में स्क्रीन पर डेटा कैसे वापस कर सकता हूं?

मैंने कुछ प्रयास किए हैं और कुछ लूप कर रहे हैं लेकिन कोई सफलता नहीं मिली है।

0
Woody 11 सितंबर 2018, 08:44

1 उत्तर

सबसे बढ़िया उत्तर

आपको ngFor का उपयोग करने की आवश्यकता है:

एचटीएमएल

    <div style="background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12); padding: 16px 8px 0 8px">
        <table>
         <thead>
           give the table head columns
         </thead>
            <tr *ngFor="let data of MyDataObject">
                <td>{{data.name}}</td>
                <td>{{data.value}}</td>
            </tr>
        </table>
    </div>
1
Abhishek Ekaanth 11 सितंबर 2018, 08:49