- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个处理 xml 文件并返回接口(interface)数据结构的服务。
起初我以为服务已经正确返回了所有数据,但后来我意识到一些不清楚的地方,特别是当我要读取组件中的数据结构时。
这是我的服务:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AppConfig } from 'src/app/app.config';
import { forkJoin, Subscription } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class BibliographyParserService {
private editionUrls = AppConfig.evtSettings.files.editionUrls || [];
private bibliographicCitations: Array<BibliographicCitation> = [];
private subscriptions: Array<Subscription> = [];
constructor(
private http: HttpClient,
) {
}
private getHttpCallsOBSStream() {
return this.editionUrls.map((path) => this.http.get(path, { responseType: 'text'}));
}
public getBibliographicCitations(): Array<BibliographicCitation> {
const parser = new DOMParser();
this.subscriptions.push(forkJoin(this.getHttpCallsOBSStream()).subscribe((responses) => {
responses.forEach(response => {
Array.from(parser.parseFromString(response, 'text/xml').getElementsByTagName('bibl')).forEach(citation => {
if (citation.getElementsByTagName('author').length === 0 &&
citation.getElementsByTagName('title').length === 0 &&
citation.getElementsByTagName('date').length === 0) {
const interfacedCitation: BibliographicCitation = {
title: citation.textContent.replace(/\s+/g, ' '),
};
if (!this.bibliographicCitations.includes(interfacedCitation)) { this.bibliographicCitations.push(interfacedCitation); }
} else {
const interfacedCitation: BibliographicCitation = {
authors: citation.getElementsByTagName('author'),
title: String(citation.getElementsByTagName('title')[0]).replace(/\s+/g, ' '),
date: citation.getElementsByTagName('date')[0],
};
if (!this.bibliographicCitations.includes(interfacedCitation)) { this.bibliographicCitations.push(interfacedCitation); }
}
});
});
}));
return this.bibliographicCitations;
}
}
export interface BibliographicCitation {
authors?: HTMLCollectionOf<Element>;
title: string;
date?: Element;
}
import { Component, AfterViewInit } from '@angular/core';
import { BibliographyParserService } from 'src/app/services/xml-parsers/bibliography-parser.service';
@Component({
selector: 'evt-bibliography',
templateUrl: './bibliography.component.html',
styleUrls: ['./bibliography.component.scss']
})
export class BibliographyComponent implements AfterViewInit{
constructor(
public bps: BibliographyParserService,
) {
console.log(this.bps.getBibliographicCitations()); // WORKS, return the correct data structure
this.bps.getBibliographicCitations().forEach(console.log); // DOESN'T RETURN ANYTHING!
console.log(this.bps.getBibliographicCitations().length); // RETURN 0
}
ngAfterViewInit() {
(document.querySelectorAll('.cloosingRood')[0] as HTMLElement).onclick = () => {
(document.querySelectorAll('.biblSpace')[0] as HTMLElement).style.display = 'none';
};
}
}
最佳答案
这里有两个问题:
bibliographicCitations
当您从
getBibliographicCitations
返回时会更新. In 可以是同步的或异步的。您需要使方法可观察:
getBibliographicCitations(): Observable<Array<BibliographicCitation>>;
Observable
。 :
private refreshSub = new Subject<void>();
private bibliographicCitations$: Observable<BibliographicCitation[]>;
refresh(): void {
this.refreshSub.next();
}
private buildObservables(): void {
this.bibliographicCitations$ = this.refreshSub.pipe(
switchMap(() => forkJoin(this.getHttpCallsOBSStream()),
map(responses => {
// Get all elements from response.
const elements = responses.reduce((acc, response) => [
...acc,
...parser.parseFromString(response, 'text/xml').getElementsByTagName('bibl')
], [] as Element[]);
// Use all elements to query for stuff.
return elements.reduce((acc, element) => {
if (['author', 'title', 'date'].every(tag => element.getElementsByTagName(tag).length === 0)) {
return [...acc, { title: element.textContent.replace(/\s+/g, ' ') }];
} else {
return [...acc, {
authors: element.getElementsByTagName('author'),
title: `${element.getElementsByTagName('title')[0]}`.replace(/\s+/g, ' '),
date: element.getElementsByTagName('date')[0],
}];
}
}, [] as BibliographicCitation[]);
})
shareReplay(1)
);
}
Observable
在您的服务中。
getBibliographicCitations(): Observable<Array<BibliographicCitation>> {
return this.bibliographicCitations$;
}
getBibliographicCitations
在组件内部并在那里订阅它。关键是您应该只在您真正准备好使用该值时订阅。存储 observable 的发射是一种反模式。
getBibliographicCitations
时,您都会创建新订阅。 getBibliographicCitations
一个新的
Subscription
被 build 。也就是说,调用3次后,就会有
3 使用自己的订阅操作
DOMParser
.而且每一个都会修改实例变量
bibliographicCitations
.
Observable
,则这些都不是必需的。一次。
关于angular - Angular 8 组件中数据访问的奇怪之处,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59217729/
这个问题已经有答案了: What is the difference between a variable, object, and reference? [duplicate] (5 个回答) 已关
我正在使用以下代码来学习java套接字编程。它的作用是,client.java 程序从用户那里获取一个号码并将其发送到 sever.java。然后服务器将其乘以2并发回给客户端。在我的客户端程序中,它
我编写了一个自己开发的串行端口类,为了简单起见,我使用了阻塞/同步/非重叠。我浏览了所有 MSDN 文档,这对我来说很困难。 我在从端口打开、传输或接收字节方面没有任何问题。所有操作都是同步并且没有线
//Not finished -- disregard function evaluate() { var cdate = new Date(); var cday = cdate.getDa
我已经尝试过了,但它有效 例如: x= 523.897 y= x[0:"."] print y 我只想打印 523。如何让 Python 抓取字符串直到某个字母或数字? 最佳答案 行 y = x[0:
我想移动拐 Angular 处的方框(从左上角开始水平移动 Angular 落到右上角然后你去到右下角。 function myMove() { var elem = document.getEl
如何让侧边栏停止在第二个侧边栏部分而不是顶部? fiddle http://jsfiddle.net/EvAdP/2/ HTML I'm the header
我刚刚在大学开始我的第二门编程类(class),我们的第一个作业相当简单,旨在基本上检查我们的环境并检查我们是否知道如何通过类(class)网站提交作业。 当我运行我们提供的代码时,它卡在应该提示用户
我目前正忙于我的这个信息学元素(构建一个示例交友网站)。问题是我在把所有东西都放在正确的地方时遇到了一些麻烦。一切都很顺利,直到我的邮箱出现在错误的位置(但是,Dreamweaver 会按照我的意
我想,和你一样hover a GIF shot on Dribbble , 当光标位于元素高度顶部之后/50% 处时显示带有信息的 div。 测试示例 我做了这个,这是有效的,但有点棘手......特
我有一个下拉菜单,并且我已将 mouseenter 设置为选项。因此,如果鼠标位于触发器之外,菜单应该关闭。我正在使用 jQuery 1.8.0。这可能是 CSS 问题吗? 这是我初始化插件的代码。
我正在尝试在 Visual Basic for Applications 中编写一个 hello world 应用程序,即修改 Excel 工作表中的单元格。这是: Sub hello() D
我的应用程序使用 JSF 2.1 和 PrimeFaces。最近,由于一些线程卡住,观察到 CPU 利用率非常高。所有卡住线程的卡住线程转储都指向 javax.faces.component.UICo
在列出 aws cognito 用户时,我的 Node js 应用程序遇到问题。 仅当我有超过 60 个 Cognito 用户时才会出现此问题。 Reference of API 下面是我的代码片段。
我是 ubuntu 用户..我在 php 中有一个执行 python 文件的命令..python 文件设置为可执行文件..所以,我的 php 命令是:- shell_exec("try.py");
我正在尝试将剪贴板内容写入文件,但由于某种原因程序卡住了。 FILE *fp; fp = fopen("tmp.code","w"); fprintf(fp,getclip()); /*writes*
当用户向下滚动时,我使用此代码使侧边栏固定在某个 div 处。问题是我必须手动输入一个阈值数字,这并不总是理想的,因为该部分的位置可能会更改或在各种浏览器和系统之间不一致。我想知道是否有一种方法可以在
我有一个字符串数组,例如 first_page = {{"U","M","Y","Q","I","A","L","D","P"、"F"、"E"、"G"、"T"、"Z"、"V"、"W"、"H"、"O"、
我能否在页面上的特定 px 位置放置一个元素(例如图像),然后让文本围绕它流动? 必要时使用 JS/jquery。 我确实看到了这个Have text flow around an object th
第一次在这里提问。 我有两个简单的 Javascript 函数,1. 生成一个随机字母,2. 在每个单元格中使用单个字母填充 10x10 表格。创建表的主要函数是通过带有 onclick 的简单 HT
我是一名优秀的程序员,十分优秀!