[英]Reason: CORS header ‘Access-Control-Allow-Origin’ missing
[英](Reason: CORS header ‘Access-Control-Allow-Origin’ missing). also showing id undefined
這是服務文件
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ItemServicesService {
constructor(private http: HttpClient) { }
baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'
viewFunction(id: string) {
return this.http.get(this.baseurl + 'items/' + id)
}
}
這是 view-component.ts 文件
import { Component, OnInit } from '@angular/core';
import { ItemServicesService } from '../services/item-services.service';
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-view-items',
templateUrl: './view-items.component.html',
styleUrls: ['./view-items.component.css']
})
export class ViewItemsComponent implements OnInit {
viewItems: any
viewId: string = ''
constructor(private itemservices: ItemServicesService, private activateroute: ActivatedRoute) { }
ngOnInit(): void {
this.activateroute.params.subscribe(data => {
this.viewId = data.id;
}, err => {
console.log('id not get' + err)
})
if (this.viewId !== null) {
console.log(this.viewId)
this.itemservices.viewFunction(this.viewId).subscribe(data => {
this.viewItems = data
}, err => {
console.log('data not get' + err)
})
}
}
}
這是 view-component.html 文件
<ul *ngIf="viewItems">
<li>{{viewItems.Item_name}}</li>
</ul>
這是列表項組件 html 文件
這里放置了視圖、編輯、刪除圖標,當單擊視圖圖標時,它將重定向到視圖組件,但這里獲取 'undefined' 而不是獲取 'id' eg=http://localhost:4200/view/undefined
<div class="container">
<h2 class="text-center"> Listing items</h2>
<button type="button" class="btn btn-primary"><a class="topbtn" [routerLink]="['/add']">Add Items</a></button>
<table *ngIf="listItems.length > 0" class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Item name</th>
<th scope="col">Item color</th>
<th scope="col">Item type</th>
<th scope="col">Item price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let info of listItems; let i=index">
<th scope="row">{{i}}</th>
<td>{{info[1]?.Item_name}}</td>
<td>{{info[1]?.Item_color}}</td>
<td>{{info[1]?.Item_type}}</td>
<td>{{info[1]?.Item_price}}</td>
<span class="action_edit"><i class="fas fa-edit"></i></span>
<span class="action_delete"><i class="fas fa-trash-alt"></i></span>
<span class="action_edit"><i [routerLink]="['/view/',info.id]" class="fa fa-eye"
aria-hidden="true"></i></span>
</tr>
</tbody>
</table>
</div>
這是 routing-module.ts 文件
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddItemsComponent } from './add-items/add-items.component';
import { ListItemsComponent } from './list-items/list-items.component';
import { ViewItemsComponent } from './view-items/view-items.component';
const routes: Routes = [
{ path: '', component: ListItemsComponent },
{ path: 'add', component: AddItemsComponent },
{ path: 'list', component: ListItemsComponent },
{ path: 'view/:id', component: ViewItemsComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
信息的類型是什么? 數組或 object
您可以通過調用訪問該名稱:
info\[1]?.Item_name
並嘗試通過調用訪問 id:
[routerLink]="['/view/',info.id]"
你也許可以試試
[routerLink]="['/view/',info\[1].id]"
對於 Access-Control-Allow-Origin 問題,我通常通過指定 url 可以連接到我的服務器來在后端解決這個問題。 也許您可以在這里找到有用的東西Cross Origin sur Google
我希望這有幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.