Question

我提出了不便之处，因为从我的组件中我只得到未定义的数据。我有一个从firebase检索数据的服务，但是如果我清理代码我意识到数据还没有被加载，它会转到组件然后它返回到服务但它组成了，我留下了未定义的参数< / p>

@Injectable()
export class ConfigService {
    settings: any;

    constructor(private afs: AngularFirestore) {
        this.afs.collection('config/visual').valueChanges().subscribe(configData => {
            this.currentYear = configData.year;
        });
    }
}

并从我的config.component.ts我想调用我的服务来获取参数，但它始终是未定义的，除非在我的config.service中添加超时

@Component({
    selector: 'app-control-facturas',
    templateUrl: './control-facturas.component.html',
    styleUrls: ['./control-facturas.component.scss'],
})
export class ControlFacturasComponent implements OnInit {
    currentYear: any;

    constructor(private configService: ConfigService) {
        this.currentYear = this.configService.currentYear;
    }
}

Answer 1

使用您的服务返回observable，然后在您的组件中订阅它。

在您的服务中，有一个返回observable的方法，该方法包含您需要的数据类型：

@Injectable()
export class ConfigService {
    settings: any;

    constructor(private afs: AngularFirestore) {
    }

    getCurrentYear() {
        return this.afs.collection('config/visual').valueChanges()
            .map(configData => configData.year);
    }
}

现在在您的组件中，您可以简单地订阅它：

@Component({
    selector: 'app-control-facturas',
    templateUrl: './control-facturas.component.html',
    styleUrls: ['./control-facturas.component.scss'],
})
export class ControlFacturasComponent implements OnInit {
    currentYear: any;

    constructor(private configService: ConfigService) {
        this.configService.getCurrentYear()
            .subscribe(year => {
                this.currentYear = year;
            })
    }
}

您不应该在服务中订阅您的数据，而是在组件中订阅。原因是因为Observable是异步的，并且这解释了你在组件中未定义：当启动类时（在构造函数阶段），数据不会被发出。如果您放置setTimeout，它会起作用，因为那时希望（或幸运）数据已经解决并且您获得了数据。

Answer 2

您只需要在值更改时从服务返回observable，并在组件中订阅这些更改。

 getCollection(){
  return this.afs.collection('config/visual').valueChanges();)}

// Component
 this.configService.getCollection().subscribe(res=>{

 this.currentYear = res.currentYear;
})

请相应地进行更改。

等待获取数据继续前进

2 个答案: