标签: angular6

我的html代码，

<div>
  <div>
   <input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
   <label class="label" for="Checkbox0" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
   <label class="label" for="Checkbox1" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
   <label class="label" for="Checkbox2" >first</label>
  </div>
</div>


 <div>
  <div>
   <input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
   <label class="label" for="Checkbox3" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
   <label class="label" for="Checkbox4" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
   <label class="label" for="Checkbox5" >first</label>
  </div>
</div>

同样，我在包含复选框的同一个 html 文件中还有两个单独的 …

我尝试按日期为我的Angular 6应用程序排序数组对象.数据具有字符串格式.我想知道是否有一个现有的模块在Angular中执行排序,或者我们必须在Typescript中构建排序函数.

角度模板

<app-item *ngFor="let item of someArray"></app-item>

数组

[
  {
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]

升级到Angular 6后，我在项目中遇到e2e测试问题。以前的测试工作正常，现在存在一个问题，即.ts文件没有被编译：错误：TSError ：？无法编译TypeScript。迁移到angular.json文件后，我没有任何变化。我试图找到配置中的确切属性负责进行翻译，但是找不到任何具体答案。我以为那是

beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
   });
},

有谁知道什么地方可能出问题了吗？

• 节点版本： v8.11.4
• 量角器版本： 5.4.0
• 角版本： 6.1.6
• Angular-CLI版本： 6.1.5
• 浏览器： Chrome
• 操作系统和版本 Windows 10.0.17134

• protractor.conf.js

  const { SpecReporter } = require('jasmine-spec-reporter');
  const jasmineReporters = require('jasmine-reporters');
  const protractorImageComparison = require('protractor-image-comparison');
  require('ts-node/register');
  require('tsconfig-paths/register');
  const { LoginWindow } = require('./e2e/loginWindow.po.js');
  exports.config = {
      allScriptsTimeout: 30000,
      specs: [
         './e2e/**/*.e2e-spec.ts'
      ],
  capabilities: {
      'browserName': 'chrome',
      chromeOptions: {
        args: [ "--no-sandbox", "--disable-gpu", "--window-size=1920x1080" ]
      }
    },
    directConnect: true,
    baseUrl: 'http://localhost:4300/',
    framework: 'jasmine',
    jasmineNodeOpts: …

  Run Code Online (Sandbox Code Playgroud)

从Angular应用程序中可以创建浏览器的子窗口并在其中显示一些预定义的角度组件.

澄清:我不是在寻找模态对话解决方案.

我有一个表单，我想知道表单中的任何输入字段是否有焦点？

我阅读了“ NgForm ”文档，但没有找到与“ focus ”相关的任何内容。

我发现感动，但它不能满足需求。

我正在尝试如何传递消息app.component.ts来显示messageComponent.ts

在app.component.html我添加<app-messagecomponent></app-messagecomponent>

添加它什么都没有显示的那一刻.

我在服务中也有一个方法:

message.service.ts

message(message) {
    return message;
}

所以我想通过消息服务从其他组件传递消息,以便在app-messagecomponent.html中显示

例如,来自app.component.ts:

sendMessageToService() {
    this.myservice.message('my Message to be displayed in the messageComponent');
}

我怎样才能做到这一点？

我有一个关于Angular 5 httpClient的问题.

这是一个带有方法foo()的模型类,我希望从服务器接收

export class MyClass implements Deserializable{
  id: number;
  title: string;

  deserialize(input: any) {
    Object.assign(this, input);
    return this;
  }

  foo(): string {
    // return "some string conversion" with this.title
  }
}

这是我的服务请求:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MyClass } from './MyClass';

@Injectable({
  providedIn: 'root',
})
export class MyClassService {

  constructor(private http: HttpClient) {
  }

  getMyStuff(): Observable<MyClass[]> {
    // this is where I hope …

目前,有一种情况是多个组件使用共享服务中的方法.此方法对端点进行HTTP调用,该端点始终具有相同的响应并返回Observable.是否可以与所有订阅者共享第一个响应以防止重复的HTTP请求？

以下是上述方案的简化版本:

class SharedService {
  constructor(private http: HttpClient) {}

  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}

class Component1 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something...')
    );
  }
}

class Component2 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something different...')
    );
  }
}

我在使用Angular 6时从延迟加载的模块加载组件时遇到问题.

我使用CLI创建了一个库 - ng generate library @org/chat

更新的angular.json文件包括:

"lazyModules": [
   "dist/org/chat"
],

然后通过AppComponent成功加载模块:

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

到目前为止一直很好,模块正在加载.

但是,ChatModule有一个名为ChatPopupComponent的组件,我找不到使用对话框(或通过将其添加到ViewChild容器)来显示它的方法.

要在对话框中打开组件,需要在模块的entryComponents下声明并在AppComponent级别导入:

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

但是当直接导入组件(并从库中导出)时,我得到以下(明显的)错误:' Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'.由于它是一个延迟加载的模块,它显然还没有导入.

当我尝试以下内容时:

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      }); …

我使用简单的form-field input组件,如下面的代码

<mat-form-field class="example-form-field" >
     <input matInput type="search" placeholder="Search"  >
</mat-form-field>

在输入默认输入的输入时,占位符将在上方.

如何在输入到输入字段时隐藏占位符？