angular6 相关问题

将贴图设置为 angular6/openlayers 中的变量

我使用 Angular 6 和 openlayers 5.1.3。我成功地执行了 npm install ol --save ，然后在我的角度中执行了 从 'ol/map' 导入 OlMap； 从 'ol/source/xyz' 导入 OlXYZ； 从 'ol/

如何解决这个错误\%RESOURCE_DIR%\？

package.json Angular6： { “名称”：“adnanrealestate”， “版本”：“0.0.0”， “脚本”：{ “ng”：“ng”， "start": "ng 服务", “构建”：“ng

Angular 6 嵌套 FormGroup 模板验证

我的表单组结构如下所示（order.component.ts）： this.orderForm = this.formBuilder.group({ 客户：this.formBuilder.group({ 名称：[''，验证器.required]， 电话: ['',

Angular Service Worker SwUpdate.available 未触发

我很难将 Angels Service Worker 集成到我的应用程序中。我按照指南进行操作，到目前为止它有效。我可以在主屏幕上创建快捷方式并启动到我的应用程序。问题...

Angular5-Toaster 动态组件注入参数

我正在尝试创建一个动态模板来显示 NPM 自述文件中列出的动态组件的信息。 https://www.npmjs.com/package/angular5-toaster 例子： 导入 {BodyOutputType}...

如何在 Angular 中预览 Docx 文件

我想要在 Angular 中预览上传的 Word 文档。使用 iframe 加载文件，但文件是下载而不是加载。 我想要在 Angular 中预览上传的 Word 文档。使用 iframe 加载文件，但文件是下载而不是加载。 <p-dialog [(visible)]="displaydoc" [modal]="true" [responsive]="true"> <div id="DocText"> <iframe src = "URL" width='700' height='550' allowfullscreen webkitallowfullscreen> </iframe> </div> </p-dialog> 下面是预览文档的一个很好的示例。 https://stackblitz.com/edit/angular-microsoft-document-viewer?file=src%2Fapp%2Fapp.component.html

跨多个项目共享 Angular 库

我正在开发一个由后端+前端组成的 Angular 7+ 项目。现在我接到一个要求，我需要创建一个由前端+后端组成的项目。但那里...

以角度动态改变颜色和状态

我正在开发一个角度应用程序。我有一个来自rabbitmq 的JSON 响应。该响应有一个级别参数，其值可以是低、中或高。如果在运行时级别值...

Angular 6：设置空表单数组字段

我正在使用 Angular 6 和反应式表单生成器来构建表单。 ngOnInit() { this.landingPageForm = this.formBuilder.group({ 标题： new FormControl('', [ 验证器.required ...

Chart.js 在同一组件中以 Angular 创建多个图表

我有一个带有组件的 Angular 6 项目，该组件获取由其父对象传递的图块对象。对于每个tile passend，我想用chart.js 生成相同的图表。我第一个角色工作得很好...

如何在Angular中使用plyr npm模块在Angular2中创建视频播放器？

我正在尝试使用这个 (Plyr-https://www.npmjs.com/package/plyr) npm 包来创建一个可以流式传输 m3u8 和 Youtube 视频的视频播放器，他们的 npm 页面有两者的演示，但是它们在 pl...

使用 Angular 中的枚举来选择下拉菜单项

我想实现选择菜单，它使用枚举数据根据所选字符串显示数据和保存的数字： HTML 代码： 我想实现选择菜单，它使用枚举数据根据所选字符串显示数据和保存的数字： HTML代码： <div class="form-group state_raw"> <label for="state_raw">State</label> <select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required> <option selected></option> <option [value]="type" *ngFor="let type of types">{{type | formatType}}</option> </select> </div> 显示数据和翻译数值的枚举： export enum MerchantStatusType { 'Being set up' = 1, 'Live for processing' = 2, 'Trading suspended' = 3, 'Account suspended' = 4 } 选择菜单对象： export class MerchantNew { constructor( public name: string, public address_state: string, ) {} } 如何实施？我想显示字符串但将数字保存到数据库中？ 编辑：我尝试过这个： 枚举： export enum MerchantStateType { being_set_up = 1, live_for_processing = 2, trading_suspended = 3, account_suspended = 4, } export const MerchantStateType2LabelMapping = { [MerchantStateType.being_set_up]: "Being set up", [MerchantStateType.live_for_processing]: "Live for processing", [MerchantStateType.trading_suspended]: "Trading suspended", [MerchantStateType.account_suspended]: "Account suspended", } 成分： public MerchantStateType2LabelMapping = MerchantStateType2LabelMapping; public stateTypes = Object.values(MerchantStateType); HTML代码： <select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required> <!--<option selected></option>--> <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option> 但我得到 4 个空行和 4 行状态。 我通常分3步完成。 首先，声明一个单独的枚举以及从枚举值到标签的映射。这样，枚举值和标签稍后都可以在一个地方进行更改，而无需更改任何其他代码。 // FileTypes.enum.ts export enum FileTypesEnum { CSV = "CSV", JSON = "JSON", XML = "XML", } // optional: Record type annotation guaranties that // all the values from the enum are presented in the mapping export const FileType2LabelMapping: Record<FileTypesEnum, string> = { [FileTypesEnum.CSV]: "Here's Csv", [FileTypesEnum.JSON]: "Here's Json", [FileTypesEnum.XML]: "Here's Xml", }; 然后将它们导入到组件中并将它们粘贴到公共属性中，这样它们就可以在视图中使用： // my.component.ts import {FileTypesEnum, FileType2LabelMapping} from "../FileTypes.enum"; @Component({ ... }) export class MyComponent implements OnInit { public FileType2LabelMapping = FileType2LabelMapping; public fileTypes = Object.values(FileTypesEnum); constructor(){} } 然后在视图中我正在对枚举的值执行 ngFor 并将它们映射到标签： <!-- my.component.html --> <select ...> <option *ngFor="let fileType of fileTypes" [value]="fileType"> {{FileType2LabelMapping[fileType]}} </option> </select> 更新： 字符串值和数字枚举编译为不同的对象 打字稿游乐场 所以看起来你必须另外过滤你的数组 public stateTypes = Object.values(MerchantStateType).filter(value => typeof value === 'number'); 将 Enum 制作为下拉列表或选择列表的另一种简单方法， 定义枚举 export enum ConditionalOperator { Equals="Equals", NEquals="NEquals", GT="GT", GTE="GTE", LT="LT", } 在组件中将枚举分配给变量，并在构造函数中将所有枚举键分配给另一个定义的数组 conditionalOperator = ConditionalOperator; enumKeys=[]; constructor(private fb: FormBuilder) { this.enumKeys=Object.keys(this.conditionalOperator); } 在 HTML 文件中，只需迭代枚举键即可分配值，如下所示， <select> <option value='' disabled selected>Operator</option> <option *ngFor="let name of enumKeys" [value]="name"> {{conditionalOperator[name]}} </option> </select> 如果有人使用NG-ZORRO模板。 按照上述解决方案[点击]，作者：@mramsath 那就试试这个： 更新构造函数或保持原样。我更新了获取值。 constructor(private fb: FormBuilder) { this.enumKeys=Object.values(this.conditionalOperator); } 主要部分如下： <nz-select name="yourFormPostName" #yourFormPostName="ngModel" [(ngModel)]="data.yourFormPostName" nzPlaceHolder="Select Type" nzAllowClear style="width: 95%;"> <nz-option nzDisabled nzLabel="Select" nzValue="disabled"></nz-option> <nz-option *ngFor="let name of enumKeys" [nzValue]="name" [nzLabel]="name"> </nz-option> </nz-select>

如何在 Angular 6 上制作面包屑

我尝试使用 Angular 6 制作面包屑。文本可以正常工作，但链接无法正常工作。 我想做这个。 主页 > 仪表板 > 统计（有效。） 主页 -> xxx.com（有效。） 仪表板 -> xx...

在js中比较2个对象的最快方法

在 javascript 中比较 2 个对象的最快方法是什么？ 例如我有这两个对象： a = [{'姓名': '约翰', '年龄': 22}, {'姓名': '迈克', '年龄': 23}, {'姓名': '安妮', '年龄': 12} , {'名字':...

如何使用角度中的reg表达式验证电话号码

尝试使用reg表达式验证电话号码。但无法正常工作。怎么办？谁知道，帮忙看看解决办法。 示例：电话号码，例如 +1 454 777788756 构造函数（

如何解析 Angular 6 中的 reg 表达式

我正在尝试在反应式表单验证中验证电话号码。但 reg 表达式无法正常工作。出现如下错误： 错误 错误：无效的正则表达式：/^/^+([0-9]{1,3})？...

Angular i18n - 插值

我正在关注 Angular i18n 指南：https://angular.io/guide/i18n 我了解了如何正确插入“字符串+变量”。 ...

使用 Angular-Cli 加载外部框架

你好Stackoverflowers， 我开发了 Angular 6 框架。我构建它并在从 Angular-Cli 新生成的项目的 index.html 中链接 .js。 但是当我启动服务器时，我得到以下信息...

Ag-grid 工具提示仅位于省略号文本上方

我在我的项目中使用企业ag-Grid版本。 我发现工具提示支持在框下并进行如下操作： 列定义 = [ { headerName: '用户名', 字段：'用户名'，

角度表单提交未提交

请帮助我的角度表单（提交）不起作用。我正在制作一个登录应用程序 登录.component.html 请帮助我的角度表单（提交）不起作用。我正在制作一个登录应用程序 登录.component.html <form (submit)="loginUser($event)"> <input type="text" placeholder="Enter Username"> <input type="password" placeholder="Enter Password"> <input type="submit" value="Submit"> </form> 登录.组件.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } loginUser(event) { event.preventDefault() Console.log(event) } } 我建议您对 ReactiveForms 等表单使用角度组件： import { FormGroup, FormControl, Validators } from '@angular/forms'; public loginForm: FormGroup; constructor() { this.loginForm = new FormGroup({ 'username': new FormControl('', [ Validators.required ]), 'password': new FormControl('', [ Validators.required ]) }); } public sendLogin(): void { console.log(loginForm.value); } <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && sendLogin()"> <input formControlName="username" type="text" placeholder="Enter Username"> <input formControlName="password" type="password" placeholder="Enter Password"> <input type="submit" value="Submit"> </form> 请记住将 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 导入到您的 app.module.ts！ 您需要做两件事才能工作。 1. 如果输入中没有 name 属性，Angular 表单将无法工作。 您可以按如下方式更改代码。 <input type="text" name="username" placeholder="Enter Username"> 然而，这并不特定于 Angular，而是一般的 HTML。 名称属性请参阅 MDN 描述 您还需要确保FormsModule已导入到您的角度模块中（最有可能是app.module.ts）。然后在表单标签中 Angular 包含 2 种管理表单的方法 - FormsModule 和 ReactiveFormsModule。 FormsModule 是两者中更容易的一个，但不能提供很多控制。 ReactiveFormsModule 有点复杂，但提供了很多控制。 对于你的情况FormsModule看起来已经足够好了。 此外，创建按钮的更语义化的方式是使用 <button type="submit>" 标签而不是 <input type="submit">。 你能试试这个吗？请使用 ngSubmit 而不是使用 (submit)。 <form (ngSubmit)="loginUser($event)"> 您可能需要在此处添加分号来美化您的代码 event.preventDefault(); Console.log(event); 这里有一些参考： https://angular.io/guide/forms Angular 在我们的应用程序中主要提供两种不同的构建表单的方式。他们是 ： 1. 模板驱动方法，允许使用更少的 cpde 构建表单 2. 使用低级 API 的响应式方法，使我们的表单无需 DOM 即可测试。我们还可以使用 FormBuilder，它是一个高级 API，我们可以通过 Angular 访问。 如果你想使用模板驱动的方法。您需要首先在 app.module.ts 文件中导入 FormsModule。在文件中添加以下语句： 从'@angular/forms'导入{FormsModule}； 并在您的 @NgModule 指令中添加 FormsModule； @NgModule({ imports:[ //other imports FormsModule ], }) 然后在您的登录模板中，您需要进行更改，代码应如下所示： <form (ngSubmit)="loginUser($event)"> <input type="text" placeholder="Enter Username" id="username"> <input type="password" placeholder="Enter Password" id="password"> <button type="submit">Submit</button> <form> // 语义化并使用按钮而不是输入 type = "submit" 是件好事 并在login.component.ts中删除event.preventDefault()。而且，console.log 的语法带有小写“c”。所以，代码看起来像这样： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } loginUser(event) { console.log(event); } } //您不需要添加 event.preventDefault()，因为您不会被重定向到任何新 URL。 现在您可以在控制台中看到您的事件正在被记录。 如果您想尝试反应式方法（也称为模型驱动）。您将需要导入 ReactiveFormsModule。因此，将以下代码片段添加到 app.mopdule.ts import { ReactiveFormsModule } from '@angular/forms' @NgModule({ imports:[ //other imports ReactiveFormsModule ], }) 请记住，响应式方法意味着您需要事先对表单进行建模并在模板中实现。 所以，在你的login.component.ts中。您将需要导入 FormControl 来设置表单的初始值。您的 login.component.ts 文件将如下所示： import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { loginForm = new FormGroup({ username: new FormControl(''), password: new FormControl('') }); constructor() { } ngOnInit() { } loginUser() { console.log(this.loginForm.value); } } 现在，将您的 login.component.html 文件更改为以下内容： <form [formGroup]="loginForm" (ngSubmit)="loginUser()"> <input type="text" placeholder="Enter Username" formControlName="username"> <input type="password" placeholder="Enter Password" formControlName="password"> <button type="submit">Submit</button> </form> 现在您可以看到控制台来查看正在存储的值。