angular6 相关问题

跨多个项目共享 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> 现在您可以看到控制台来查看正在存储的值。

如何在 Angular 6 的 index.html 中使用环境变量

我正在使用 Angular6，在我的项目中我使用 Facebook Account Toolkit 进行移动验证。 我需要使用以下代码在 index.html 文件中初始化帐户工具包。 AccountKit.in...

如何使用 TypeScript 将多个参数传递给 Angular 中的 @Directives (@Components)？

自从我将 @Directive 创建为 SelectableDirective 以来，我对如何将多个值传递给自定义指令有点困惑。我已经搜索了很多，但没有得到正确的解决方案

Angular 6 中的 Google 身份验证

我在 Angular 6 中创建了一个项目，它使用 Angular-6-social-login 展示谷歌身份验证。以下是安装命令： npm install --save Angular-6-social-login 在此之后，我...

当用户点击输入文本时如何在输入中添加前缀+6

我使用角度材质（https://material.angular.io/components/form-field/overview）进行输入。 我想当用户单击字段插入电话号码时自动添加“+6” 目前“6”预......

如何测试 Web 应用程序 UI 的布局是否正确。我可以在 Angular 中使用 Karma/Jasmine 来实现吗？

滚动事件在 Angular-6 中未触发

我知道这个问题以前被问过，但没有一个解决方案对我有用。 我正在从事 Angular-6 项目。我正在尝试在名为