我正在寻找一种在加载页面上的所有控件后执行某些操作的方法。这些控件通过调用http get 并行加载。
我尝试了类似于下面的代码，但它似乎没有解决问题。如果工作正常，某些文本应该显示“完成”。事实并非如此。我不确定我是否正确理解 forkJoin 的工作原理。我曾经在 Angular 1.x 中使用 Promise 进行这种链接。任何有助于理解问题和解决方案的帮助都将受到赞赏。
我正在寻找的解决方案类似于 Angular 1.x 的这个问题：Angular将并行和链式请求与 $http.then() 和 $q.all() 结合起来
完整代码位于http://plnkr.co/edit/xH6VJo
来源是 src/dash.ts
这是 Angular 5 和 typescript。
export class dash implements OnInit {
sometext = 'Some text ...';
private httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient) {}
click_me(): void {
this.sometext = '';
forkJoin([
of(this.first_()),
of(this.second_())
]).subscribe(val => {
this.sometext = 'done...';
})
}
first_(): void {
this.http.get<any>('data/sampledata.json',this.httpOptions).subscribe(val=> {
this.sometext = val.items[0].value; …我在 Angular 5 项目中使用 TinyMCE 编辑器，并且想要处理图像上传，但我目前无法做到这一点。这是我当前的代码：
<editor
name="questionStatement"
apiKey="somekey"
[init]='{
plugins : [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
past_date_images: true,
external_plugins: { tiny_mce_wiris: "https://www.wiris.net/demo/plugins/tiny_mce/plugin.js" },
toolbar: "tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry"
}'
</editor>
我们想要测量以下 Angular 事件，并且我们知道如何做到这一点：
但我们想记录额外的信息：
我们怎样才能得到这些额外的信息呢？
我正在放慢从 AngularJS 到 Angular(2+) 的迁移速度，并且偶然发现了一些东西。
在 AngularJS 中，我使用了很多工厂和服务来跨指令、控制器和其他服务共享数据。可以轻松地在一处更新服务并自动更新其他地方。
但是，我尝试在 Angular 5 中以类似的方式使用服务，但当我更改服务变量时，“什么也没发生”。
我见过一些解决方案，涉及创建“拉取”新数据的函数或建议更新“Angular 更改服务”以将事件绑定到变量。
但是，我的应用程序在许多位置使用了许多变量。我必须在使用它们的每个组件中单独订阅每个变量，并更改服务以对每个变量发出更改，这似乎并不正确。
我只是错过了什么吗？
谢谢！！！韦恩
例如：
主页的组件。
import { Component, OnInit } from '@angular/core';
import { HomeButtonDirective } from '../home-button.directive';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
在主页上重复使用的按钮的指令：
import { Directive, Input, OnInit, HostListener } from '@angular/core';
import { InfoService } from './info.service';
@Directive({
selector: '[appHomeButton]',
providers: [InfoService]
})
export class HomeButtonDirective {
@HostListener('click', …我使用的是 Angular 5 材质，并且有一个包含菜单和子菜单数据的 JSON 对象。我该怎么办？我可以使用 type= link 或 sub 显示项目，但我不知道如何向孩子们显示。我想在单击父项时显示子项。我用mat-nav-list和mat-list-item向他们展示，但我不知道如何向孩子们展示。
这是对象：
import { Injectable } from '@angular/core';
export interface ChildrenItems {
state: string;
name: string;
type?: string;
}
export interface Menu {
state: string;
name: string;
type: string;
icon: string;
children?: ChildrenItems[];
}
const MENUITEMS = [
{
state: 'dashboard',
name: 'Dashboard',
type: 'link',
icon: 'dashboard'
},
{
state: 'setting',
name: 'Settings',
type: 'sub',
icon: 'settings',
children: [
{
state: 'station_management',
name: 'Station Management',
type: …如何将变量分配给 primeng TurboTable ColGroup colspan 属性。
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="colSpanCount">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
在上面的示例中，我想将 colSpanCount 变量绑定到 p 表的 colspan 属性。
当用户使用 mat Datepicker 选择日期时，我想以 dd/MM/YYYY 格式显示日期，但是当我在 Datepicker 中使用 Datepipe 时，它在我们选择时不显示任何日期
<mat-form-field class="box">
<input matInput [matDatepicker]="picker" placeholder="Generate Date" maxlength="10px" [readonly]="isNew1"
[ngModel]="quotation?.generateDate | date: 'dd/MM/yy'"
(ngModelChange)="quotation.generateDate=$event" [ngModelOptions]="{standalone: true}">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [disabled]="isNew1" #picker></mat-datepicker>
</mat-form-field>
我有一个来自 API 的动态 json，如下所示：
{123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}
我在模板中编写了以下 HTML 代码，其中我从资产文件夹中获取 image-1、image-2 徽标
<div class="row">
<div class="col-6" (click)="cityClick('Bangalore')">
<div class="img-1">
// my image-1 logo goes here
</div>
<div class="img-text">
Bangalore
</div>
</div>
<div class="col-6" col-6 (click)="cityClick('Mumbai')">
<div id="image_block" class="img-2">
// my image-2 logo goes here
</div>
<div id="text_block" class="img-text">
Mumbai
</div>
</div>
</div>
如何在单击图像时获取 json 的键并从相应的键值中显示图像下方的文本。当我点击时，我应该能够在点击事件中传递键和文本。请帮助，因为我是 Angular 的新手！
大家好，
我正在努力为名称输入制作验证器，我只是从 angular wiki 回复了代码，但仍然无法正常工作。
你能帮我找出问题吗？
谢谢指教。
我的 HTML 代码：
<form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
<div class="form-group">
<label for="namePro">Nom</label>
<input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
<div *ngIf="namePro.invalid && (namePro.dirty || namePro.touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="namePro.errors.required">
El Nom del professional es obligatori
</div>
</div></form>
还有我的 TS 组件
formAlta: FormGroup;
ngOnInit() {
this.formAlta = new FormGroup({
idPro: new FormControl(),
documentTypePro: new FormControl(),
namePro: new FormControl('',[Validators.required]),
rProfessional: new FormControl(this.tipusPro),
firstSurnamePro: new FormControl(),
secondSurnamePro: new FormControl(),
businessNamePro: new FormControl(),
idCli: new FormControl(), …如果单击位于具体 DOM 元素之外，我使用以下指令来检测和隐藏块：
import {
Directive,
ElementRef,
Output,
EventEmitter,
HostListener
} from "@angular/core";
@Directive({
selector: "[clickOutside]"
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {}
@Output()
public clickOutside = new EventEmitter();
@HostListener("document:click", ["$event.target"])
public onClick(targetElement) {
const clickedInside = this._elementRef.nativeElement.contains(
targetElement
);
this.clickOutside.emit(clickedInside);
}
}
我已将此指令应用于元素：
<div class="action" (click)="open()">Open</div>
<div
class="search_content"
*ngIf="_searchContentOpen"
clickOutside
(clickOutside)="clickOutside($event)"
></div>
组件代码为：
open(): void {
this._searchContentOpen = !this._searchContentOpen;
}
问题是当我调用 click 我设置this._searchContentOpen为真/假。
取决于它，我会显示应用指令的块。但是当 ngIf 工作时，指令也总是同步工作。因此，永远不会显示结果块。
如何解决？