Angular 当一个属性'；x'；是私人的->；“错误”；不能在外面使用'；y'；组件，因为x是私有的；但当它公开时，它显示x don'；在y中不存在

我用的是角度9 在库塞拉的这个角度课程之后，这是我试图实现的指令

在询问之前，我读了很多博客文章，但找不到解决办法

当我用更新menu.ts文件的构造函数时

constructor(private dishservice:DishService,
    @Inject('BaseURL') private BaseURL) { }

和menu.html文件

constructor(private dishservice:DishService,
    @Inject('BaseURL') private BaseURL) { }

它显示了这个错误

ERROR in src/app/menu/menu.component.html:12:33 - error TS2341: Property 'BaseURL' is private and only accessible within class 'MenuComponent'.

12     <img height="200px" src="{{ BaseURL + dish.image }}" alt="{{dish.name}}">
                                   ~~~~~~~

  src/app/menu/menu.component.ts:7:16
    7   templateUrl: './menu.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MenuComponent.

下面是我的app module.ts、dishservice.ts、menu.ts和menu.html文件的完整代码

应用程序模块->

///... are module related to material design
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
...
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
...
import{HttpClientModule} from '@angular/common/http';
...

import {DishService} from './services/dish.service';
import { PromotionService } from './services/promotion.service';
import { LeaderService } from './services/leader.service';

import 'hammerjs';
import{baseURL} from './shared/baseurl';
import { DishdetailComponent } from './dishdetail/dishdetail.component';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
   ...
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  providers: [DishService,
              PromotionService,
            LeaderService,
            {provide: 'BaseURL', useValue: baseURL}
          ],
  entryComponents: [
              LoginComponent    
              ],
  bootstrap: [AppComponent]
})
export class AppModule { }

dishservice.ts->

import { Injectable } from '@angular/core';
import {Dish} from '../shared/dish';
import {Observable,of} from 'rxjs';
import {delay} from 'rxjs/Operators';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';

@Injectable({
  providedIn: 'root'
})
export class DishService {
  getdishes():Observable<Dish[]>{
    return this.http.get<Dish[]>(baseURL+'dishes');
  }
  getDish(id: String): Observable<Dish> {
  return this.http.get<Dish>(baseURL + 'dishes/' + id);
  }
  getFeaturedDish(): Observable<Dish> {
    return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]));
  }
  getDishIds(): Observable<string[] | any>{
    return this.getdishes().pipe(map(dishes => dishes.map(dish => dish.id)));
  }
  constructor(private http:HttpClient) { }
}

{{dish.name |大写}}

---

我对所有这些都不熟悉，请帮助

您能检查一下ngOnInit（）中的console.log中是否出现了BaseURL吗？菜单页面的控制台日志显示状态代码4001！试试这个

publicbaseURL；构造函数（私有dishservice:dishservice，@Inject（'BaseURL'）BaseURL）{this.BaseURL=BaseURL}

yes它是指向json服务器的链接http://localhost:3000/';请稍候。。您不是在为baseURL创建注入令牌吗？您能检查一下ngOnInit（）中的console.log中是否出现了baseURL吗？菜单页的控制台日志显示状态代码4001！试试这个

publicbaseURL；构造函数（私有dishservice:dishservice，@Inject（'BaseURL'）BaseURL）{this.BaseURL=BaseURL}

yes它是指向json服务器的链接http://localhost:3000/';请稍候。。您不是正在为baseURL创建注入令牌吗？

import { Injectable } from '@angular/core';
import {Dish} from '../shared/dish';
import {Observable,of} from 'rxjs';
import {delay} from 'rxjs/Operators';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';

@Injectable({
  providedIn: 'root'
})
export class DishService {
  getdishes():Observable<Dish[]>{
    return this.http.get<Dish[]>(baseURL+'dishes');
  }
  getDish(id: String): Observable<Dish> {
  return this.http.get<Dish>(baseURL + 'dishes/' + id);
  }
  getFeaturedDish(): Observable<Dish> {
    return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]));
  }
  getDishIds(): Observable<string[] | any>{
    return this.getdishes().pipe(map(dishes => dishes.map(dish => dish.id)));
  }
  constructor(private http:HttpClient) { }
}

import { Component, OnInit , Inject} from '@angular/core';
import {Dish} from '../shared/dish'
import { DishService } from '../services/dish.service';
import { baseURL } from '../shared/baseurl';
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
  dishes:Dish[];
  constructor(private dishservice:DishService,
    @Inject('BaseURL') BaseURL) { }

  ngOnInit(): void {
    this.dishservice.getdishes().subscribe(dishes => this.dishes=dishes);
  }
}

<div fxFlex *ngIf="dishes"><mat-grid-list cols="2" rowHeight="200px">
<mat-grid-tile *ngFor="let dish of dishes" [routerLink]="['/dishdetails',dish.id]">
    <img height="200px" src="{{ BaseURL + dish.image }}" alt="{{dish.name}}">
    <mat-grid-tile-footer><h1>{{dish.name | uppercase}}</h1></mat-grid-tile-footer>
</mat-grid-tile>
</mat-grid-list>

</div>