Я пытаюсь выучить Angular с помощью ASP.NET Core и у меня был базовый запуск проекта. Теперь я сталкиваюсь с очень простой проблемой, которая, я думаю, требует нескольких модификаций. Я создал проект web api и разместил его на IIS - Внутренний сервер. Таким образом, я использовал API следующим образом в Angular:
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Our First Angular App';
public values: object[];
constructor(private http: Http) {
this.http.get('http://192.168.10.100/api/values').subscribe(result => { //Calling the web api here as jSon
this.values = result.json() as object[];
}, error => console.error(error));
}
}
Приведенное выше не получает данные в интерфейсе с Angular. Вместо этого он вызывал исключение при отладке с помощью элемента проверки браузера:
http://192.168.10.100/api/values - http request was insecure
Я понимаю, что для этого может потребоваться интеграция https или какой-либо тип безопасности. Но в настоящее время есть ли способ заставить вышеуказанный код работать с http-запросом? Я включаю файлы конфигурации ниже, если они могут быть полезны:
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"OurFirstAngularApp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"C:\\Users\\AT\\Documents\\Visual Studio 2017\\Projects\\OurFirstAngularApp\\OurFirstAngularApp\\node_modules\\bootstrap\\dist\\css\\bootstrap.min.css"
],
"scripts": [
"C:\\Users\\AT\\Documents\\Visual Studio 2017\\Projects\\OurFirstAngularApp\\OurFirstAngularApp\\node_modules\\bootstrap\\dist\\js\\bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "OurFirstAngularApp:build"
},
"configurations": {
"production": {
"browserTarget": "OurFirstAngularApp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "OurFirstAngularApp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"OurFirstAngularApp-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "OurFirstAngularApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "OurFirstAngularApp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "OurFirstAngularApp"
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
N.B : Приведенный выше API работает нормально при запросе, я имею в виду получение jSon данных идеально.
Обновление 1 : Startup.cs
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application,
// visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvc();
app.UseDefaultFiles();
app.UseStaticFiles();
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
}
Обновление 2 : jSon данные - Необработанные данные jSon
Теперь я понял. В основном это был http-вызов, и по соображениям безопасности он требовал https. Поэтому я попытался использовать службу https, которая содержит необработанные данные jSon. Но когда я сделал следующее:
public default: object[];
constructor(private http: Http) {
this.http.get('https://jsonplaceholder.typicode.com/todos/1/').subscribe(result => {
this.default = result.json() as object[];
}, error => console.error(error));
}
Наконец, в интерфейсе с Angular:
<tr *ngFor="let value of default">
<td>{{ value.userId }}</td>
<td>{{ value.title }}</td>
</tr>
Приведенный выше код выдает исключение при использовании элемента проверки браузера, что-то вроде этого - Ошибка: невозможно найти отличающийся поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы.