变量可用性，函数声明

Question

我在访问Angular项目中定义的变量时遇到问题。我完全是个新手，但请耐心等待。我的项目是这样的：

app.component.html：

<div>
<ul>
<li *ngFor='let var1 of Fcomponent' >{{var1}}</li>
</ul>
</div>

app.component.ts:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'project';
}

变量1.component.ts:

import { Injectable } from "@angular/core";
@Injectable({
providedIn:'root'
})
export class Variables1Service{
Fcomponent: number[]=[0,1,2,3,4,5,6,7,8,9];
}

variables1.service.ts:

import { Injectable } from "@angular/core";
@Injectable({
providedIn:'root'
})
export class Variables1Service{
Fcomponent: number[]=[0,1,2,3,4,5,6,7,8,9];
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Variables1Service } from './variables1.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [Variables1Service],
bootstrap: [AppComponent]
})
export class AppModule {}

现在我得到以下错误：

无法获取/。错误：src/app/app.component.html:3:27-错误TS2339:类型"AppComponent"上不存在属性"Fcomponent"。

3<li*ngFor=‘Fcomponent的let var1’>｛｛var1｝｝

如何使其工作？

Answer 1

内部app.component.ts位于：

export class AppComponent {
title = 'project';

需要添加以下代码：

private variables1Service:Variables1Service;
constructor (){
this.variables1Service=new Variables1Service();
}
get Fcomponent() {
return this.variables1Service.Fcomponent;
}

一切都开始有条不紊地工作。