（原因：缺少 CORS header 'Access-Control-Allow-Origin'）。 还显示 id undefined

Question

这是服务文件

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 { }

Answer 1

信息的类型是什么？ 数组或 object

您可以通过调用访问该名称：

info\[1]?.Item_name

并尝试通过调用访问 id：

[routerLink]="['/view/',info.id]"

你也许可以试试

[routerLink]="['/view/',info\[1].id]"

对于 Access-Control-Allow-Origin 问题，我通常通过指定 url 可以连接到我的服务器来在后端解决这个问题。 也许您可以在这里找到有用的东西Cross Origin sur Google

我希望这有帮助