Question

我在rxjs中使用angular 7。我有3个标签。在每个标签中，我们要执行一些操作。

我在这里粘贴相关标签的html供参考。

<div class="container">
<div class="row">
<form method="POST" [formGroup]="dependentForm" enctype="multipart/form-data" class="form-horizontal col-md-12">
<div class="row">
<div class="form-group col-md-4">
<label for="Name">Name</label>
<input for="name" class="form-control" type="text" id="name" placeholder="Enter Name"
formControlName="name" />
</div>
<div class="form-group col-md-4">
<label for="relationShip">RelationShip</label>
<select class="form-control" id="relationShip" formControlName="relationShip">
<option [ngValue]="relationShip.Code" *ngFor="let relationShip of _relationShipArr">{{relationShip.Name}}</option>
</select>
</div>
<div class="form-group col-md-4 ">
<label for="dob">Date of Birth</label>
<input for="dob" class="form-control" type="text" id="dob" placeholder="Enter Date of Birth"
formControlName="dob" />
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="Address">Address</label>
<textarea class="form-control" rows="1"
formControlName="address" id="address" placeholder="Enter Address"></textarea>
</div>
<div class="form-group col-md-4">
<label for="contactNumber">Contact Number</label>
<input for="contactnumber" class="form-control" type="text" id="contactNumber"
placeholder="Enter Contact Number" formControlName="contactNumber" />
</div>
<div class="form-group col-md-2 align-self-end">
<button class="btn btn-block btn-primary" type="submit" (click)="SaveDependent()" [disabled]="!dependentForm.valid">
<i class="fa fa-fw fa-save"></i>Add</button>
</div>
<div class="form-group align-self-end col-md-2">
<button type="submit" class="btn btn-block btn-primary" (click)="ClearDependent()">
<i class="fa fa-fw fa-undo"></i>Reset</button>
</div>
</div>
</form>
</div>
<div class="row">
<table class="table table-bordered table-hover col-md-12">
<thead>
<tr>
<th>Name</th>
<th>RelationShip</th>
<th>Date of Brith</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dependent of dependents|async" (click)="SelectDependent(dependent)">
<td>{{dependent.Name}}</td>
<td>{{dependent.RelationShip|statusformat:"relationShip"}}</td>
<td>{{dependent.Dob}}</td>
<td>{{dependent.ContactNumber}}</td>
</tr>
</tbody>
</table>
</div>
</div>

我正在使用反应形式在此选项卡中添加相关详细信息。我具有从使用BehaviourSubject的服务调用GetDependents（服务代码如下所示）中填充的表中的同一选项卡。因此它将只能从API读取一次。

import { Injectable } from '@angular/core';
import { IMember } from '../models/imember';
import { BaseService } from 'src/app/framework/baseservice';
import { BehaviorSubject } from 'rxjs';
import { switchMap, shareReplay } from 'rxjs/operators';
import { IDependent } from '../models/idependent';
import { IDonation } from '../models/idonation';

@Injectable()
export class MemberService extends BaseService {

private _dependentSubject: BehaviorSubject<Array<IDependent>>;


constructor(protected http: HttpClient) { 
super();
this._dependentSubject=new BehaviorSubject<Array<IDependent>>(null);
}

GetDependents(memberId:number){
let ob = this.http.get<Array<IDependent>>(this.urlResolver(`Member/Dependents/${memberId}`));
return this._dependentSubject.pipe(switchMap(()=>ob),shareReplay(1));
}
AddDependent(dependent:IDependent)
{

}
}

如果您在html中看到我有一个添加按钮，该按钮会将每个相关详细信息添加到表中。并且应该将这个实习生附加到BehaviourSubject上。然后再次刷新表。

我如何实现这一目标。我不想在add上调用save依赖的API。所有从属添加都应保存在内存中。

整个标签都有一个通用的保存按钮，可以保存整个更改。

Answer 1

为了更新BehaviorSubject的值，请使用.next推送新值。您可以使用.value获取当前值，但我更喜欢使用.pipe(take(1))。

private _dependentSubject: BehaviorSubject<Array<IDependent>>;

constructor(protected http: HttpClient) { 
  super();
  this._dependentSubject = new BehaviorSubject<Array<IDependent>>(null);

  this.http.get<Array<IDependent>>(this.urlResolver(`Member/Dependents/${memberId}`))
      .pipe(map((response: any) => /* map to Array<IDependent> */)
      .subscribe((result: Array<IDependent>) => this._dependentSubject.next(result));
}

get dependents(): Observable<Array<IDependent>> {
  return this._dependentSubject.asObservable();
}

AddDependent(dependent:IDependent)
{
  this._dependentSubject.pipe(take(1))
      .subscribe((dependents: Array<IDependent>) => {
        /* TODO: deal with null value when http get hasn't returned yet */
        dependents.push(dependent);
        this._dependentSubject.next(dependents);
      });
}

您可能希望研究解析器，以确保在此组件开始执行之前就已加载数据，这样就没有时间等待服务器响应并在您的服务器中保留null BehaviorSubject。

Answer 2

在您的AddDependent方法内部，您可以添加此行以推送数据

from fuzzywuzzy import fuzz

input = {
    'GilletsJaunes': 100,
    'Macron': 50,
    'gilletsjaune': 20,
    'tax': 10,
}

threshold = 50

output = dict()
for query in input:
    references = list(output.keys()) # important: this is output.keys(), not input.keys()!
    scores = [fuzz.ratio(query, ref) for ref in references]
    if any(s > threshold for s in scores):
        best_reference = references[argmax_index(scores)]
        output[best_reference] += input[query]
    else:
        output[query] = input[query]

print(output)

它将您的新值与以前的值合并。在这里，我使用传播算子。

如何在Angular 7中的Rxjs中修改或附加BehaviorSubject数据

2 个答案: