关于Angular版本6的问题,来自Google的Web框架。将此标记用于仅针对版本6的Angular问题。对于任何不特定于单个版本的Angular问题,请使用标记Angular。
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...
我想实现选择菜单,它使用枚举数据根据所选字符串显示数据和保存的数字: 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 制作面包屑。文本可以正常工作,但链接无法正常工作。 我想做这个。 主页 > 仪表板 > 统计(有效。) 主页 -> xxx.com(有效。) 仪表板 -> xx...
在 javascript 中比较 2 个对象的最快方法是什么? 例如我有这两个对象: a = [{'姓名': '约翰', '年龄': 22}, {'姓名': '迈克', '年龄': 23}, {'姓名': '安妮', '年龄': 12} , {'名字':...
尝试使用reg表达式验证电话号码。但无法正常工作。怎么办?谁知道,帮忙看看解决办法。 示例:电话号码,例如 +1 454 777788756 构造函数(
我正在尝试在反应式表单验证中验证电话号码。但 reg 表达式无法正常工作。出现如下错误: 错误 错误:无效的正则表达式:/^/^+([0-9]{1,3})?...
我正在关注 Angular i18n 指南:https://angular.io/guide/i18n 我了解了如何正确插入“字符串+变量”。 ...
你好Stackoverflowers, 我开发了 Angular 6 框架。我构建它并在从 Angular-Cli 新生成的项目的 index.html 中链接 .js。 但是当我启动服务器时,我得到以下信息...
我在我的项目中使用企业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 中创建了一个项目,它使用 Angular-6-social-login 展示谷歌身份验证。以下是安装命令: npm install --save Angular-6-social-login 在此之后,我...
我使用角度材质(https://material.angular.io/components/form-field/overview)进行输入。 我想当用户单击字段插入电话号码时自动添加“+6” 目前“6”预......
我知道这个问题以前被问过,但没有一个解决方案对我有用。 我正在从事 Angular-6 项目。我正在尝试在名为
Routerlink 不起作用,但如果我在 url 中输入路径,我就可以转到视图
在我的主路线中,我有很多模块,一些是延迟加载,其他是预加载策略,还有简单组件的路线。有些路由有 AuthGuard。 当我单击带有路由的元素时...
在 Angular Material 2 表中使用虚拟滚动和@angular/cdk-experimental
我有一个表显示很多行,我想优化它的性能。我通过使用虚拟滚动技术找到了解决方案。这是 Angular Material CDK Virtual Scroll Vi 的示例...
我正在尝试在我的项目中使用 Bpmn-JS。 所以当我尝试创建工作流程时我看到 谁能告诉如何删除它,因为它是在画布中动态出现的......! 预先感谢。