我如何动态更改 Angular Fire Path [关闭]

Question

关闭。 这个问题需要更加集中。 它目前不接受答案。

---

想改进这个问题？ 更新问题，使其仅通过编辑此帖子专注于一个问题。

5 小时前关闭。

这篇文章在4 小时前被编辑并提交审核。

改进这个问题

我正在尝试使用input来动态更改angular-fire路径。 我试图使用双向绑定来更新字符串，但它不会更改path 。

Component One接受一个输入，该输入传递给一个Service ，然后发送到Component Two ，在那里应该调用数据库。

组件一

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
selector: 'app-comp-one',
templateUrl: '<input [(ngModel)]="someData" (ngModelChange)="update()">',
styleUrls: ['./compone.css']
})
export class AppOneComponent {
someData = '';

constructor(private appService: AppService) {}

update() {
this.appService.updateData(this.someData);
}
}

服务

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/internal/Subject";

@Injectable({
providedIn: 'root'
})
export class AppService {

public subject = new Subject<any>();
dataObservable$ = this.subject.asObservable();

updateData(data: any) {
  this.subject.next(data);
}

}

组件二

import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AppService } from './app.service';

@Component({
selector: 'app-comp-two',
templateUrl: './comptwo.html',
styleUrls: ['./comptwo.css']
})
export class AppTwoComponent implements OnInit {
data = '';

links: Observable<any[]>;
constructor(private appService: AppService, db: AngularFireDatabase, private titleService: Title, private meta: Meta) {
this.links = db.list(this.data,  ref => ref.limitToLast(100)).valueChanges().pipe(map(values => values.reverse()));
}

ngOnInit() {
this.subscribeToData();
}

subscribeToData() {
this.appService.dataObservable$.subscribe((data) => (this.data = data));
}
}

组件二HTML

  <div class="negligible">

  <div class="negligible" *ngFor="let link of links | async | slice:0:5">
  <svg width="100%" height="100%">
  <rect width="100%" height="100%" fill-opacity="0.0" class="negligible"/>
  <text fill="#ffffff" font-family="Verdana" text-anchor="middle" letter-spacing="7.5" x="50%" y="40%">{{link.data_here}}</text>
  </svg>
  </div>

  </div>