Question

我正在尝试在Angular 5中实现客户端数据服务。我对Angular还是很陌生，这是我第一次实现数据服务。

这是我的DataService类：

@Injectable()
export class DataService {
private url: string;
private binomialResultSource = new BehaviorSubject(new  Observable<IBinomialResult>());
public binomialResult = this.binomialResultSource.asObservable();

constructor(
    private http: HttpClient) {
    this.url = "api/BinomialResult/GetBinomialResult/0/0";
    this.binomialResultSource.next(this.http.get<IBinomialResult>(this.url));
}

getBinomialResult(inputValues: any) {
    this.url = "api/BinomialResult/GetBinomialResult/" + inputValues.failureCount + "/" + inputValues.demandCount;
    this.binomialResultSource.next(this.http.get<IBinomialResult>(this.url));
} 
//private url: string;
//public binomialResult: any;
//public binomialResultSource: BehaviorSubject<IBinomialResult>;

//constructor(
//  private http: HttpClient) {
//  this.url = "api/BinomialResult/GetBinomialResult/0/0";
//  this.binomialResult = this.http.get<IBinomialResult>(this.url);
//  this.binomialResultSource = new BehaviorSubject<IBinomialResult>(this.binomialResult);
//}

//getBinomialResult(inputValues: any) {
//  this.url = "api/BinomialResult/GetBinomialResult/" + inputValues.failureCount + "/" + inputValues.demandCount;
//  this.binomialResult = this.http.get<IBinomialResult>(this.url);
//  this.binomialResultSource.next(this.binomialResult);
//} }

被注释掉的部分在一定程度上可以正常工作，它可以按期望的那样在模板中显示binomialResult，这表明我从控制器中获取了所需的数据，但是，在调用.next时它不会更新（）。当前代码（未注释掉）根本不显示任何内容。

这是我的角度分量：

@Component({
selector: "bionomial-result",
templateUrl: './binomial-result.component.html',
styleUrls: ['./binomial-result.component.css']
})

export class BinomialResultComponent implements OnInit {
@Input() class: string;
title: string;
errorMessage: any;
binomialResult: any;
inputForm: FormGroup;

constructor(
    @Inject('BASE_URL') private baseUrl: string,
    private dataService: DataService,
    private formBuilder: FormBuilder    ) {
    this.inputForm = this.formBuilder.group({
        'priorType': [''],
        'failureCount': [''],
        'demandCount': ['']
    });
}

ngOnInit() {
    this.dataService.binomialResult.subscribe((result: any) => this.binomialResult = result);
}

onSubmit() {
    this.dataService.getBinomialResult(this.inputForm.value);
} }

这是我当前用于测试的组件模板的一部分：

 <h4>Summary</h4>
   <pre>{{binomialResult.Output}}</pre>

   <p>
     This is a test: f = {{binomialResult.Failures}}, D = {{binomialResult.Demands}}
   </p>

我在网络上发现了一些示例，这代表了我的最大努力，但到目前为止没有成功。我最好的猜测是binomialResult没有反映出binomialResultSource中的内容。任何指针将不胜感激！

Answer 1

您真的非常想这个。如HttpClient guide所示，它应该简化为这个。

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

  getBinomialResult(inputValues: any): Observable<IBinomialResult> {
    const url = `api/BinomialResult/GetBinomialResult/${inputValues.failureCount}/${inputValues.demandCount}`;
    return this.http.get<IBinomialResult>(url);
  } 
}


export class BinomialResultComponent {
  binomialResult: IBinomialResult;
  inputForm: FormGroup;

  constructor(
    private dataService: DataService,
    private formBuilder: FormBuilder
  ) {
    this.inputForm = this.formBuilder.group({
        'priorType': [''],
        'failureCount': [''],
        'demandCount': ['']
    });
  }

  onSubmit() {
    this.dataService.getBinomialResult(this.inputForm.value)
      .subscribe(result => this.binomialResult = result);
  } 
}

 <h4>Summary</h4>
 <div *ngIf="binomialResult">
   <pre>{{ binomialResult.Output }}</pre>

   <p>
     This is a test: f = {{ binomialResult.Failures }}, D = {{ binomialResult.Demands }}
   </p>
 </div>

我使用BehaviorSubject的DataService无法正常工作

1 个答案: