Ниже приведен код индекса. html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularCustomer1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
<script type="text/javascript" src="assets/js/popper.js"></script>
<script type="text/javascript" src="assets/js/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.12.1.js"></script>
</html>
Ниже приведен код app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ниже приведен код app.component. html
Customer Details
<ng-container *ngFor='let customer Of customers'>
{{ customer.custmerId }}
{{ customer.customerName}}
</ng-container>
Ниже приведен код app.component.ts
import { Component, OnInit } from '@angular/core';
import { CustomerService } from './../services/customer.service'
import { Customer } from './../model/Customer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'angular-customer1';
customers : Array<Customer> = [];
constructor( private customerService: CustomerService ) { }
ngOnInit() {
this.customers = this.customerService.getCustomers();
}
}
Ниже приведен код компонента CustomerService
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Customer } from './../model/Customer'
import { map } from 'rxjs/operators';
import {Observable} from 'rxjs';
import {forEach} from "@angular-devkit/schematics";
@Injectable({
providedIn: 'root'
})
export class CustomerService {
constructor() { }
getCustomers() {
let customers : Array<Customer> = [];
// @ts-ignore
$.ajax({
url: ' some service url.',
cache: false,
async: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success(data) {
const parseddata = JSON.parse(data);
parseddata.forEach( (item) => {
let address = '';
let phone = '';
let email = '';
if (item.Address === '' || item.Address === undefined || item.Address == null) {
address += '';
}
else {
address += item.Address + ' ,';
}
if (item.City === '' || item.City === undefined || item.City == null) {
address += '';
}
else {
address += item.City + ' ,';
}
if (item.State === '' || item.State === undefined || item.State == null) {
address += '';
}
else {
address += item.State + ' ,';
}
if (item.Country === '' || item.Country === undefined || item.Country == null) {
address += '';
}
else {
address += item.Country;
}
if (item.Zip === '' || item.Zip === undefined || item.Zip == null) {
address += '';
}
else {
address += item.Zip;
}
if (item.Phone1 === '' || item.Phone1 === undefined || item.Phone1 == null) {
phone = '';
}
else {
phone = item.Phone1;
}
if (item.Email === '' || item.Email === undefined || item.Email == null) {
email = '';
}
else {
email = item.Email;
}
const objCustomer = new Customer(item.CustomerId, item.CustomerName, address, phone, email);
console.log(objCustomer)
customers.push(objCustomer);
});
},
error(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
return customers;
}
}
Ниже указан клиент объект
export class Customer {
customerId: number;
customerName: string;
customerAddress: string;
customerPhone: string;
customerEmail: string;
constructor(customerId: number, customerName: string, customerAddress: string, customerPhone: string, customerEmail: string ) {
this.customerId = customerId;
this.customerName = customerName;
this.customerAddress = customerAddress;
this.customerPhone = customerPhone;
this.customerEmail = customerEmail;
}
}
Ниже приведены данные json, так как я не могу дать URL для насмешки над данными
"[{\"CustomerId\":282,\"CustomerName\":\"PRMP\",\"Address\":null,\"Country\":null,\"City\":null,\"State\":null,\"Zip\":null,\"Phone1\":null,\"Phone1Ext\":null,\"Phone2\":null,\"Phone2Ext\":null,\"Fax\":null,\"Email\":null},{\"CustomerId\":284,\"CustomerName\":\"ABCD\",\"Address\":null,\"Country\":\"USA\",\"City\":\"Malvern\",\"State\":\"PA\",\"Zip\":\"19355\",\"Phone1\":\"+1.484.913.2110 \",\"Phone1Ext\":null,\"Phone2\":null,\"Phone2Ext\":null,\"Fax\":null,\"Email\":null},{\"CustomerId\":291,\"CustomerName\":\"GMRUD\",\"Address\":null,\"Country\":null,\"City\":null,\"State\":null,\"Zip\":null,\"Phone1\":null,\"Phone1Ext\":null,\"Phone2\":null,\"Phone2Ext\":null,\"Fax\":null,\"Email\":null}]"
Ниже приведены мои вопросы для решения angular путь. 1. Это рабочий пример с вызовом ajax, однако я не хотел бы делать вызов ajax и использовать вызов httpclient, и все же я могу манипулировать данными и возвращать объект 2. Ajax потребность в вызове jquery и я не хотел бы использовать это также