如何将Angular中带有服务的JSON文件或REST响应中的值映射到两个(或更多)打字稿对象的属性中?

问题描述 投票:0回答:1

尽管我认为this answer相对接近我的问题并获得了一定的声誉,但我做错了。我读了很多关于如何在Angular中使用观察者模式((...).pipe(map(...)).subscribe(...)*ngFor="... | async")的“新”样式的文章,现在也偶然发现How to Avoid Observables in Angular。我不想避免反应迟钝的行为。我想在REST-API中进行更改,以将“实时”反映给用户,而无需重新加载Observer。这就是为什么我要向一个Observable(以及其中的数据流中的“可能存在”的值)订阅对象(以及对象的属性),对吗?

在我的模板中,我有:

<p>Werte:<br><span *ngFor="let attribute of _attributes | slice:0:5; index as h">
 {{attribute.name}}: <strong>{{getParamNameAt(h)}}</strong> </span><br>
<span *ngFor="let attribute of _attributes | slice:5: _attributes.length; index as h">
 {{attribute.name}}: <strong>{{getParamNameAt(h + 5)}}</strong> </span></p>

在我的组件中,我有:

private _attributes: Attribute[];

constructor(private attributesService: BkGenericaAttributesService) {
    attributesService.getAttributes().subscribe({ next:  attributes => this._attributes = attributes });
  }

  getParamNameAt(h: number): string {
    return this._attributes[h].parameters.find(param => param.value === attrVal).name;
  }

作为服务,我有:

const localUrl = '../../assets/json/response.json';

@Injectable()
export class BkGenericaAttributesMockService implements BkGenericaAttributesService {

  constructor(private http: HttpClient) {
    }

  getAttributes(): Observable<Attribute[]> {
    return this.http.get<Attribute[]>(localUrl).pipe(
      tap((attributes : Attribute[]) => attributes.map((attribute : Attribute) => console.log("Piping into the http-request and mapping one object after another: " + attribute.name))),
      map((attributes : Attribute[]) => attributes.map((attribute : Attribute) => new Attribute(attribute.id, attribute.name, attribute.title, attribute.description,
        (attribute.parameters ? attribute.parameters.map((parameter : Parameter) => new Parameter(parameter.id,
          parameter.name, parameter.value)) : [])))));
  }

我在此时运行应用程序的问题是[to-on-create-on-stream] Attribute对象和“嵌套” Parameters []数组(通过将Parameter对象推入其中创建)。来自httpClient的Observable的_attributes数组:Piping into the http-request and mapping one object after another: undefined

Apart of this-是一种正确的构造方法,可从JSON文件(或API流,当用户访问SPA时可能会更改)读取值,以将其显示为多个对象的属性。角度视图?

使用上述the answer-或我以为我必须将其转换为代码的方式-我开始怀疑我是否真的了解(并使用)数据提供程序的反应性Angular方式<= Observables =>操作员=>订户,最后将观察者显示给用户。

我真的很困惑(如您所读,因为到目前为止我发现的很多答案和描述都使用了较旧的模式(在Angular 5.5之前?)和/或部分相互矛盾。

我是否在正确的地方处理API更改?将模板的*ngFor指令的数组设置为观察者(使用| async处理),还是由模板后面的模型处理数组中各个值的更改,并且模板获取其新值(通过插值和属性绑定)以及带有组件属性更改的指令,而无需async ing?

简述:是否有for-dummies默认指令,用于将来自http请求的值“流读取”到多个Typescript对象中,并且它们的属性同时显示在模板中,并且仅在相关DOM节点Angular中呈现在线更改指令8自以为是的方式? “流读取”的意思是:(仅)在API发生更改的情况下进行拉和推,而不会浪费资源。

json angular rest httpresponse rxjs-observables
1个回答
0
投票

如果我理解正确,您希望服务器在发生更改后立即将更改推送给客户端,以便客户端可以做出相应的反应并进行渲染,对吗?

© www.soinside.com 2019 - 2024. All rights reserved.