尽管我认为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发生更改的情况下进行拉和推,而不会浪费资源。
如果我理解正确,您希望服务器在发生更改后立即将更改推送给客户端,以便客户端可以做出相应的反应并进行渲染,对吗?