标签: angular5

我试图弄清楚如何处理HttpHeaders上的标头,以通过HttpClient将它们用于http请求.

const headers = new HttpHeaders();
headers.append('foo', 'bar');
headers.set('foo', 'bar');

console.log(headers.get('foo')) // null

它只能这样工作:

const headers = new HttpHeaders().set('foo', 'bar');
console.log(headers.get('foo')) // bar

有没有一种特殊的方法来添加标题？或者这是一个错误？

我创建了一个问题组件.在那个组件中,我提出了一些硬编码的问题.当我尝试运行应用程序时,它显示文本未定义.

这是我的组件:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-question-list',
templateUrl: './question-list.component.html',
styleUrls: ['./question-list.component.css']
})
export class QuestionListComponent implements OnInit {
questions: Object[];
constructor() {
this.questions = [
  {
    text: 'What is your name?',
    answer: 'My name is Saeef'
  },
  {
    text: 'What is your favorite color?',
    answer: 'My favorite color is blue'

 ];
 }

 ngOnInit() {
 }

 }

我的HTML:

<div class="question" *ngFor let question of questions">
<div class="card">
    <div class="card-header">
        {{ question.text }}
    </div>
    <div class="card-block">
        <p …

我正在asyncAnglur 5中实现一个搜索字段。当用户开始在搜索框中输入内容时，应该会显示加载指示符。当结果到达时，指示符应该被隐藏。

我尝试了这种方法，但是即使用户未输入任何内容，加载指示器也可见。那么实现此目标的最佳方法是什么？

我的模板：

<mdl-textfield #searchBox (keyup)="search(searchBox.value)" type="text" placeholder="Nach Kurs, Beteuer, Studiengruppe suchen..."></mdl-textfield>
<!--[...]-->
<div *ngIf="courses$ | async as courses">
  <ng-container *ngIf="courses.length; else noItems">
      <app-course *ngFor="let course of courses" [course]="course" [addAble]="true"></app-course>
  </ng-container>
  <ng-template #noItems><em>Kein Ergebniss für "{{searchBox.value}}"</em></ng-template>
</div>

组件：

public courses$: Observable<Course[]>;
public searchCourseTerm = new Subject<string>();
public serachLoadingIndicator: boolean = false;

constructor(private courseService: CourseService) { }

gOnInit() {
  this.courses$ = this.searchCourseTerm.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap((term: string) => this.courseService.searchCourse(term)),
  );
}

search(term: string ){
  this.searchCourseTerm.next(term);
}

很棒的组件。我在Angular 5中使用了最新版本的ngx-chips。我试图使自定义主题与此处相同，但不起作用。这是我的.scss文件：

@import '~ngx-chips/core/styles/core/_core.scss';

$foundation-primary: #1779ba;
$foundation-primary-dark: darken($foundation-primary, 10%);

// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);

// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);

// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);

// apply theme to the container
:ng-deep .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}

// apply theme to …

我正在使用angular5 mat-selection-list在同一组件中创建多个组件。

list-selection-example.html

 Shoes: 
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes" 
                   [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectShoes()">Deselect all Shoes</button>

Cloths: 
<mat-selection-list #cloths>
  <mat-list-option *ngFor="let cloth of typesOfCloths" 
                   [value]="cloth">
    {{cloth}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectCloth()">Deselect all Cloths</button>

列表选择示例

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  typesOfCloths = ['Amaxa', 'Cotton', 'Woolen', 'Nylon'];

    @ViewChild(MatSelectionList) shoes: MatSelectionList;
    @ViewChild(MatSelectionList) cloths: MatSelectionList;


  deselectShoes(){
    this.shoes.deselectAll(); 
  }

  deselectCloth(){
    this.cloths.deselectAll(); 
  }
  ngOnInit(){

  }
}

这是完整的代码：https : //stackblitz.com/edit/angular-i3pfu2-dla3rd?file=app%2Flist-selection-example.ts

在此示例中，deselectShoes()方法按预期工作。但deselectCloth()在 …

有一阵子，我只是将网站内容存储在s3存储桶中，并且可以通过完整的url访问所有页面。我想通过添加SSL使我的网站更安全，所以我创建了一个CloudFront发行版以指向我的s3存储桶。

该站点将加载正常，但是如果用户尝试刷新页面或尝试使用完整URL（即www.example.com/home）访问页面，则他们将收到一个AccessDenied页面。

我是Angular的新手，所以我需要一些帮助，我的问题是打电话给http get，我使用service是我的第一个get

我的第一项服务

 getFirstData() { return this.http.get<FirstDataResults ('http://myurl.com/api/Classes/ads', httpOptions);    

我的组件TS文件

this.data.getFirstData().subscribe(
  data => {
    this.firsobjects = data.results;
  },
  err => console.error(err),
  () => this.getComplementData(this.firstobjects)

);

到现在为止，一切都很好，可以获取我的数据，完成后，我运行第二个函数getComplementData

我的第二次服务

 getSecondData(idFirstObject: String) {

return this.http.get<ComplementDataResults>(
  'http://myurl.com/api/Classes/Complement?' +
  'where={'"idFirstObject":"' + idFirstObject + '"}',
  httpOptions); }   

我的组件TS文件

getComplementData(firsobjects) {
this.number = 0;
for (var _i = 0; _i < firsobjects.length; _i++) {
  this.data.getSecondData(firsobjects[_i].id).subscribe(
    (data) => {
        var a = (data.results);
        this.firsobjects[this.number].complements = a;
    }, err => console.log('error ' + err),
    () => console.log('Ok ')
  ); …

我正在尝试将项目的角度版本更新为V6.但是我收到以下错误:

$ ng update @angular/cli

收集"@ schematics/angular/migrations/migration-collection.json"无法解析.

的package.json:

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@angular/cdk": "5.0.0-rc.3",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/material": "5.0.0-rc.3",
    "angular2-json-schema-form": "^0.7.0-alpha.1",
    "jsoneditor": "^5.14.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.5",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.5",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": …

我在angular 5中使用了矩v2.22.0，这就是我在模块中导入它的方式-

import * as moment from 'moment';

并将其作为-

export class ChatComponent {
  .
  .
  .
  public moment: any = moment;
  .
  .
}

当我在html模板中使用它时-

<div>{{moment(activeTeam.createdAt).format('LL')}}</div>

它给我一个错误消息，-

[Angular] Member 'moment' is not callable

谁能告诉我我在做什么错！

我们已经使用JavaScript / jQuery以编程方式轻松触发了按键/按下/按下事件。

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

但是，使用Angular 5和TypeScript，我们该怎么做呢？

//I am setting value programmatically -> working
document.getElementById('custom_Credit').setAttribute('value', coinsToBuy);    
//setting focus -> working
document.getElementById('custom_Credit').focus();
//but there are no way to generate or trigger keypress/up events.
document.getElementById('custom_Credit')..........;