标签: angular5

我需要在模板的锚点上绑定click事件：

我的html看起来像这样：

<a (click)="deleteUser(user)">
    <i class="la la-trash"></i>
</a>

user 是上一个变量 *ngFor="let user of users"

该deleteUser()函数在我的users.component.ts文件中声明：

import { Component, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
import { Helpers } from '../../../../helpers';
import { ScriptLoaderService } from '../../../../_services/script-loader.service';

import { User } from '../../../../models/user';
import { UsersService } from '../../../../_services/users.service';

import swal from 'sweetalert';


@Component({
    selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
    templateUrl: "./users.component.html",
    styleUrls: ["./users.component.scss"],
    encapsulation: ViewEncapsulation.None,
})
export class UsersComponent implements OnInit, AfterViewInit {

    users: User[];

    constructor(
        private _script: ScriptLoaderService,
        private …

我正在处理Angular 5中的HttpClient,问题是服务器在登录过程中发送的cookie,似乎Angular忽略了它,因为下一个带有"withCredentials"的请求没有设置它.

我的package.json

...."@ angular/cli":"1.6.3","@ angular/compiler-cli":"^ 5.0.0","@ angular/language-service":"^ 5.0.0",. ...

我的代码

makeLogin (us:string, password:string): Observable<any> {
    let body : any = new HttpParams()
      .set('username', us)
      .set('password', password);
    return this.http.post(this.urlLogin,
      body.toString(),

      {
        headers: new HttpHeaders()
          .set('Content-Type', 'application/x-www-form-urlencoded')
      }
    );
  }

服务器使用这些标头返回http 200

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:17
Date:Tue, 23 Jan 2018 21:05:46 GMT
Expires:0
Pragma:no-cache
Set-Cookie:JSESSIONID=BF9392ED5DE99710B44845201DD26B3F;path=/;HttpOnly
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

之后,下一个请求例如

getEventt (): Observable<any> {
    return this.http.get('http://localhost:8080/list',{ withCredentials: true });
  }

使用chrome或firefox开发人员工具我看不到发送的cookie,但是如果我使用浏览器或邮递员一切正常,我可以看到cookie已经发送.

我不知道我做错了什么,或者是否以错误的方式使用httpClient.

如果有帮助,服务器部署在tomcat 8上,Angular应用程序在nodejs上运行(npm start)

我正在开发一个Web应用程序 - MEAN堆栈.我正在尝试使用ChartJS圆环图,但我需要它是完全动态的 - 首先,图表的数量是动态的(每个图表代表其他东西)所以有时它将是3和有时20秒.其次,我希望能够访问每个图表以进行实时数据更改.它甚至可能吗？我试图创建一个数组,它将保存每个图表数据并使用*ngFor创建每个图表一个canvas元素,但它不起作用.

我的chartjs.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';
import {ElementRef} from '@angular/core';
@Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements OnInit {
constructor( private _dataService : DataService, private elementRef: ElementRef) { 

}
jsons: any;
NumberOfSystems: Number;
charts = [];
ngOnInit() {
this._dataService.getData().subscribe(data => {
  this.jsons = data
  this.NumberOfSystems = this.jsons.data[0][1].systems.length
  this.createChartsData()
}); 
} …

如Firebase Cloud Firestore Batched中所述：

如果不需要读取操作集中的任何文档，则可以将多个set操作作为包含set（），update（）或delete（）操作的任意组合的单个批处理执行。一批写操作是原子完成的，可以写到多个文档。

如何使用angular 5删除集合中的所有文档？

// Get a new write batch
var batch = db.batch();


// Delete the city 'LA'
var laRef = db.collection("cities").doc("LA");
batch.delete(laRef);



<!--  Delete All Tasks  -->
    <button 
      mat-button mat-icon-button 
      (click)="tasksService.deleteAllTasks(openSnackBar())" 
      matTooltip="Delete All Tasks" 
      class="toolbar-btn" 
      [disabled]="(tasksService.tasks$ | async)?.length == 0">
      <i class="fa fa-trash"></i>
    </button>
<!-- Delete All Tasks  -->

我正在尝试将字符串注入我的角度组件.下面的代码工作正常,但它给出了弃用警告: 不推荐使用get:从v4.0.0开始使用Type或InjectionToken

@Component({
  selector: 'app-label',
  templateUrl: './label.component.html',
  styleUrls: ['./label.component.scss']
})
export class LabelComponent {
  public name: string;
  public caption: string;
  constructor(
    private injector: Injector
  ) {
    this.name = this.injector.get('name');
    this.caption = this.injector.get('caption');
  }
}

因此我尝试使用这个非常简短 且不完整的文档Angular 5 Injector来提出类似下面的内容,但是我不想useValue或者useClass,我需要的是注入的实际值.

    class BS { }
    // [..]
    const name = new InjectionToken<string>('name');
    const caption = new InjectionToken<string>('caption');
    const injector = ReflectiveInjector.resolveAndCreate([
      { provide: name, useClass: BS},
      { provide: caption, useClass: BS}
    ]);
    this.name = this.injector.get(name);
    this.caption = …

我的应用程序基于Angular 5构建，并且在IE11的任何文本框中键入字母时，在chrome中都遇到问题。在文本框中输入单个字母至少需要2秒钟。欢迎页面中的内存使用量为400mb，如果转到任何其他组件，则内存使用量将增加100mb。

简而言之，我需要提高任何文本框中的键入速度。您能否提出一种解决此问题的方法。

我正在使用选择数据表

取消选择我们使用的所有行:

this.selection.clear();

其中selection是SelectionModel类的对象.现在,如果我想从"组件打字稿代码"后面的代码中删除特定行的选择,那么有什么有用的"angular"语句就像clear()方法一样？

当我向服务器发送POST请求时,我收到一个错误:

Failed to load http://localhost:8181/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

后端是用Java Spring编写的.我创建测试的方法:

createTest() {
    const body = JSON.stringify({
      'description': 'grtogjoritjhio',
      'passingTime': 30,
      'title': 'hoijyhoit'
    });

    const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      )
    };

    return this._http.post(`${this._config.API_URLS.test}`, body, httpOptions)
      .subscribe(res => {
        console.log(res );
      }, error => {
        console.log(error); …

使用以下代码Angular 5:

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

我明白了:

我怎样才能得到这个(一些文本是左对齐的,一些文本是右对齐的)？

我尝试div使用预定义创建并放入内部段落,css但它没有成功.

我是ngrx状态管理的新手，我正在使用@ ngrx / store和6.0.1的效果，假设我想保存一个新的成员联系人，所以我已经做好了以下准备：

• 成员效应

  @Effect()
  memberContactCreate$ = this.actions$.pipe(
      ofType(MemberActions.MemberActionTypes.MemberContactCreate),
      switchMap((action: MemberActions.MemberContactCreate) => {
          return this.memberService.createMemberDetail(action.payload);
      }),
      map(
          (response) => {
              console.log('MemberContactCreate$ MemberContactCreate response: ', response);
              if (!response.didError) {
                  return new MemberActions.MemberContactCreateSuccess(response.model as MemberDetailResponse);
              } else {
                  return new MemberActions.MemberContactCreateFailure(response.errorMessage);
              }
          },
      ),
  );
  

  Run Code Online (Sandbox Code Playgroud)

• 在我的成员联系组件提交中，我将调度创建动作

  this.store.dispatch(new fromAction.MemberContactCreate(<MemberDetailRequest>this.memberDetailForm.value));

但是，我想显示一个敬酒或通知，如果我的成员从服务器成功创建（在我的@Effect方法中定义），则返回新动作“ MemberActions.MemberContactCreateSuccess ”，但是我如何才能在我的组件中捕获此动作呢？马上被发射？我试图做下面的事情并将其放在我的ngOnInit中，并认为它可以像订阅一样使用，但事实并非如此，实际上它每次都像页面加载一样触发，甚至我没有调度我的memberContactCreate操作...

this.store.select(fromSelector.getMemberCreateSuccess)
      .subscribe((stateSelector) => {
        console.log('getMemberCreateSuccess: ', stateSelector);
        setTimeout(() => {
          this.toastr('Hooray',
            'New contact has been created successfully!');
        }, …