标签: angular5

我想创建一个.ts包含我的数据模型的文件。每个数据模型都映射到一个JSON我将从服务器发送或接收的数据。例如。对于用户个人资料，Json 是

 {
  "firstname" : "d",
  "lastname" : "d",
  "email" : "dd",
  "password" : "d"
}

对于上面的内容，我想创建一个类，如下所示

export class UserProfile {

  constructor (public firstname:string,
               public lastname:string,
               public email:string,
               public password:string){}
}

服务器可能发送的另一个 JSON 是

{
result:"success"
addition-info:"something"
}

上面的类是

export class Result{

  constructor (public result:string,
               public additionalInfo:string){}
}

Angular 中是否有关于如何为数据模型创建文件的最佳实践？我可以创建一个.ts文件BackendApiModels.ts来存储所有类，还是应该.ts为每个数据模型创建一个文件？我什至不知道是否可以创建一个.ts可以包含多个类的文件，例如

后端API

 export class UserProfile {

      constructor (public firstname:string,
                   public lastname:string,
                   public email:string,
                   public password:string){}
    }

    export class Result{ …

我正在尝试将滑动手势集成到 Angular 材料 2(Angular5) 中。它在桌面上使用鼠标工作。问题是，当我使用移动设备（Chrome）时，它只感知选项卡标签上的手势。

模板代码：

<mat-tab-group mat-scroll-y (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)" class="home-tabs" mat-stretch-tabs [(selectedIndex)]="selectedIndex">
    <mat-tab label="Home">
      <ng-template mat-tab-label>
        <mat-icon>home</mat-icon>
      </ng-template>
      <app-my-cars></app-my-cars>
    </mat-tab>
    <mat-tab label="Registered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-registered-cars></app-registered-cars>
    </mat-tab>
    <mat-tab label="Unregistered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-unregistered-cars></app-unregistered-cars>
    </mat-tab>
  </mat-tab-group>

组件代码：

export class DashboardHomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
  selectedIndex: number = 0;
  totalTabs: number = 3;
  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };
  swipe(eType) {
    console.log(eType)
    if(eType === 'swipeleft' && this.selectedIndex < this.totalTabs){
      this.selectedIndex …

我无法为表单中的“datetime-local”元素赋值。

模板中的代码：

打字稿文件中的代码：

let dateTime : Date = new Date();

this.testForm = this.formBuilder.group({    
  'dateTime': new FormControl(dateTime),
});

结果：

使用打字稿将日期和时间分配给 datetime-local 的正确方法是什么

我有一个对象数组（config.lensTab），我在 Html 中使用 ngFor 显示这些对象：

<tr *ngFor="let item of config.lensTab; let i = index;">
          <th scope="row">{{ i + 1}}</th>
          <th><label></label>
          <input [(ngModel)]="item.radius" class="form-control"
                             type="number" step="0.01" name="radius-{{i}}</th>
[...]

我添加了一个“+”按钮，它将在数组中的给定索引（idx）中插入一个元素：

  public addLens(idx: number) {
           let toAdd = new LensModel(0, 0, 0,
           new MaterialModel('Air', 0), 0, 0);
           this.config.lensTab.splice(idx + 1, 0, toAdd);
     }

当我用 console.log 显示数组的内容时，插入操作似乎工作正常。然而，在我的 html 视图中，新行旁边的行与该新行具有相同的值。

我给你一个简单的例子来帮助理解：

Tab : [RED, GREEN, WHITE] --> add "BLUE" at index 1 ---> [RED, BLUE, BLUE, WHITE]

我究竟做错了什么 ？

编辑：这就是我初始化配置对象的方式

this.config = new ConfigModel(); …

我创建了一个自定义属性指令库包并将其安装到 myProject 中，当我尝试使用此自定义指令时会引发错误。

错误错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“appHasAccess”，因为它不是“输入”的已知属性。

我使用的代码如下：

所有可能的尝试我都做了。任何人都知道我如何解决这个问题。

1.指令：HasAccessDirective.ts

@Directive({
  selector: '[appHasAccess]',
})

export class HasAccessDirective {

accessDetail = { 'a': 1 }
 @Input('appHasAccess') set appHasAccess(accessDetail: any) {
    // Based on right control enable/disable
    this.eleRef.nativeElement.disabled = this.appRights.hasRights(accessDetail);
}
constructor(private eleRef: ElementRef,
    private appRights: MyService) { }
}

2.模块：DigiUserRightsModule.ts

   @NgModule({
        declarations: [
            HasAccessDirective
        ],
        imports: [
            CommonModule,
            HttpClientModule,
        ],
        exports: [
            HasAccessDirective
        ],
        providers: [UserRightsService]
    })

export class DigiUserRightsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DigiUserRightsModule,
            providers: [UserRightsService]
        };
    }
}

我有以下表格。我想强制使用图表类型。但是，仅当图形是条形图或折线图而不是饼图或圆环图时，才应强制指定 X 轴和 Y 轴值。根据我的代码，X 轴和 Y 轴值始终是强制性的。请帮忙。

html

    <form [formGroup]="clientForm" (ngSubmit)="clientForm.valid && changeGraph()" #formLogin="ngForm">

              <div class="form-group">
            <label> Graph Type </label>
            <select class="form-control" formControlName="type">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let t of types' [ngValue]="t"> {{t}} </option>
            </select>
            <div class="form-err" *ngIf="(clientForm.controls['type'].hasError('required') && clientForm.controls['type'].touched) || (clientForm.controls['type'].hasError('required') && formLogin.submitted)"> Please enter Graph Type </div>
              </div>

              <div class="form-group">
            <label> X-Axis </label>
            <select class="form-control" formControlName="xAxis">
              <option disabled [ngValue]="null"> Select Option </option>
              <option *ngFor='let dim of dimensions?.data' [ngValue]="dim"> {{dim}} </option>
            </select>
            <div class="form-err" *ngIf="(clientForm.controls['xAxis'].hasError('required') …

我正在阅读https://angular.io/guide/forms。

我的代码：

  <!-- Min price -->
  <div class="form-group">
    <label for="minprice">Min price</label>
    <input type="number"
           min="0"
           class="form-control" id="minprice"
           required
           [(ngModel)]="model.minprice" name="minprice"
           #minprice="ngModel">
    <div [hidden]="minprice.valid"
         class="alert alert-danger">
      Min price is required
    </div>
  </div>

  <!-- Max price -->
  <div class="form-group">
    <label for="maxprice">Min price</label>
    <input type="number" class="form-control" id="maxprice"
           required
           min="0"
           [(ngModel)]="model.maxprice" name="maxprice"
           #maxprice="ngModel">
    <div [hidden]="maxprice.valid"
         class="alert alert-danger">
      Max price is required
    </div>
  </div>

我有两个问题：

1、min="0"好像不行。当我输入时-1，没有显示错误消息。

2、如何验证minprice小于maxprice？

欢迎任何提示。谢谢

我想在 Angular 5 中创建一个自定义选择输入控件。我有一个实现 SelectControlValueAccessor 的组件。当我实现如下所示的课程时。它在代码注释中给出了错误。

import { Component, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
import {  SelectControlValueAccessor } from '@angular/forms';
import { SELECT_VALUE_ACCESSOR } from '@angular/forms/src/directives/select_control_value_accessor';

@Component({    
    selector: 'select-input',
    template: ` `,
    providers: [
        {   
          provide: SELECT_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SelectInputComponent),
            multi: true
        }
    ]
})

/*
[ts]
Class 'SelectInputComponent' incorrectly implements class 'SelectControlValueAccessor'. Did you mean to extend 'SelectControlValueAccessor' and inherit its members as a subclass?
  Property '_renderer' is missing in type 'SelectInputComponent'.
class SelectInputComponent
*/
export …

我收到一条警告，指出全球化已被弃用，并且有一个指向https://cordova.apache.org/news/2017/11/20/migrate-from-cordova-globalization-plugin.html的信息链接。

但我不明白如何在 Ionic 中使用它，如何在 Angular 5 中导入导航器？

在以下存储库中：

https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions

我有3个元素

1. nginx服务器
2. 香草角app1
3. 香草角app2

app2是一个克隆app1

我正在使用Windows 10操作系统与Cygwin.

要试用该系统，请打开 3 个终端窗口并执行以下操作：

$ mkdir lab-nginx-angular
$ cd lab-nginx-angular
$ git clone https://github.com/napolev/lab-nginx-angular .
$ git checkout nasiruddin-suggestions
---
$ cd nginx
$ ./nginx.exe
---
$ cd app1
$ ng serve
---
$ cd app2
$ ng serve

内部文件：.angular-cli.json我有以下内容（例如app1：）：

{
  ...
  "defaults": {
    "styleExt": "css",
    "component": {},
    "serve": {
      "host": "app1.example.com",
      "port": 4201
    }
  }
  ...
}

app1 …