标签: angular7
如何访问 ngrx/effects 中的解析器数据？（v7）
我在组件中有 api 调用，这很耗时，所以我实现了解析器。我希望解析器数据存在于商店中，以供以后使用。我已经实现了 ngrx/store、ngrx/effects 和 ngrx/router-store。
组件中的当前状态
- 直接从组件中的解析器数据获取数据（路由类型为ActivatedRoute）
期望状态
为了保存解析器数据，我需要访问有效的解析器数据。所以我可以简单地在组件中调度操作并订阅状态。
- 组件中的调度操作 (LoadSubTopicDetails)
- 效果将监听操作并访问效果中相同的解析器数据
问题
{}我总是在 CustomSerializer 中的“数据”中变空。
在 app-routing.module.ts 中使用解析器
路由到 SubTopic/:subTopicId 时的控制台输出
如何访问效果中的解析器数据？提前致谢。
代码
减速器/index.ts（CustomSerializer）
export interface RouterStateUrl {
url: string;
queryParams: Params;
params: Params;
data: any;
}
export const reducers: ActionReducerMap<State> = {
routerReducer: fromRouter.routerReducer
};
@Injectable()
export class CustomSerializer implements fromRouter.RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
let route = routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
const { …推荐指数
解决办法
查看次数
OnClick 使用 Angular 更改背景颜色
当用户单击列表时，我有 ul 标签，背景颜色必须更改为其他颜色。我正在使用 Angular7，并且对此很陌生。我怎样才能做到这一点。
HTML：
<ul class="horizontal" id="nav">
<li><a class="active">Draft</a></li>
<li><a>Planned</a></li>
<li><a>Started</a></li>
<li><a>Suspended</a></li>
<li><a>Ended</a></li>
</ul>
CSS：
ul.horizontal li {
float: left;
}
ul.horizontal {
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #E2E2E2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul.horizontal li a {
color: #000;
display: block;
position: relative;
line-height: 32px;
padding: 0 16px 0 32px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
ul.horizontal li a.active {
background-color: #0275E7;
color: #ffff;
// background-color: …推荐指数
解决办法
查看次数
错误：模板解析错误：在角度中找不到管道“过滤器”
导入此过滤器
// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';
它的 HTML 代码
//search
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="search">
//Assigned filter to table
<tr *ngFor="let bookName of NameOfBookList | filter:searchText">
任何帮助，将不胜感激。
推荐指数
解决办法
查看次数
如何在角度7中的一个ngfor下将两个不同插值中的值相乘
如何在角度7中的一个ngfor下将两个不同插值中的值相乘
<tr *ngFor="let element of marketArray ">
<td class="text-center">1</td>
<td> {{element.price}} </td>
<td> {{element.quantity}} </td>
<td>!{{element.price}} * {{element.quantity}}!</td>
</tr>
推荐指数
解决办法
查看次数
如何将 reader.result 转换为字符串？
当我尝试在角度三上上传图像时，下面的打字稿文件中的 reader.result 出现错误，我该如何解决此问题？我console.log(image)在 onImagePicked 函数中添加了它，但它也没有显示在控制台中，为什么它不显示在控制台中？
打字稿文件
imagePreview:string;
ngOnInit(){
this.form = new FormGroup({
title : new FormControl(null,{validators:[Validators.required]}),
content: new FormControl(null,{validators:[Validators.required]} ),
image: new FormControl(null, {validators: [Validators.required]})
});
onImagePicked(event: Event){
const file = (event.target as HTMLInputElement).files[0];
this.form.patchValue({image: file});
this.form.get('image').updateValueAndValidity();
console.log(file);
const reader = new FileReader();
reader.onload = () => {
this.imagePreview = reader.result;
};
reader.readAsDataURL(file);
}
网页文件
<mat-card>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<form [formGroup]="form" (submit)="onAddPost()" *ngIf="!isLoading">
<mat-form-field>
<input matInput type="text" formControlName="title" placeholder="title" >
<mat-error *ngIf="form.get('title').invalid" >Please enter the Title</mat-error>
</mat-form-field>
<mat-form-field>
<textarea …推荐指数
解决办法
查看次数
如何将 Angular 7 应用程序包含在现有的 html 文件和网站中？
我一方面有一个现有网站，另一方面有一个 Angular 7 应用程序组件。
我想编辑现有的someusecase.html并重用我的 Angular 7 应用程序，例如
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
我需要在 html 中包含什么才能使其工作？我正在寻找相当于以下内容的东西：
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
换句话说，是否可以在<div>现有网页的范围内重用和激活 Angular 7 应用程序？
推荐指数
解决办法
查看次数
.Net core：动态获取标头来源
我正在使用 Angular7/.Net core Web API，我需要通过 .net core API 动态检索前端的原始 url 值，如 http://localhost:4200或http://domainName.com。我使用了下面的代码，但它与.net core不匹配
model.origin = Request.Headers.GetValues("Origin");
推荐指数
解决办法
查看次数
是否可以将数据保存在 Angular 本地的数据库中？
我正在开发一个应用程序，在大部分时间使用它时不会有 Internet 连接。
此应用程序的数据将存储在服务器上，为了更新数据，它应该能够连接到该服务器并基本上“下载”所有新数据或更新更改的数据。因此，我需要能够将这些数据保存在运行该应用程序的设备上，以便在不再连接时能够检索它。
我唯一发现的是localStorage，但是，据我所知，数据不是永久保存的，而是临时保存的。我需要能够将它永久保存在设备上，直到它再次连接并自我更新。
这无论如何可能吗？
推荐指数
解决办法
查看次数
当您在其外部单击时如何阻止角垫菜单关闭？
我使用 MatMenu 作为弹出窗口来浏览我的网络应用程序上的新用户，所以我不想在用户点击它时关闭它。
我已经使用了 $event.stopPropagation() 来阻止它在我单击其中的按钮时关闭。现在我想知道如何保持打开状态，即使您单击它的外部。
推荐指数
解决办法
查看次数
检查 Observable 是否未定义
在 Angular 7 应用程序上，我有以下模板：
<div *ngIf="avatarUrl$ | async;">
<ng-container *ngIf="avatarUrl$ | async as avatarUrl">
<img [src]="avatarUrl ? avatarUrl : 'avatar-default.png'">
</ng-container>
</div>
将avatarUrl$作为从数据库中通过服务获得是可观察到的。
我只想在avatarUrl$加载值后显示 IMG 。
但是，有时从服务中获得的值是未定义的。
在这种情况下，我需要显示默认头像，例如：avatar-default.png。
问题是未定义avatar-default.png时不显示avatarUrl$。
我认为因为这种情况与未加载和正在加载但未定义的值没有区别？
<div *ngIf="avatarUrl$ | async;">
我该如何解决这个问题？
推荐指数
解决办法
查看次数