标签: angular7

我找到了一些关于如何使用.cdk-drag-preview和.cdk-drag-placeholder类的基本示例，当没有嵌套元素时，它们似乎可以完成这项工作。

基本上，我有一个动作列表，每个动作都以复杂的mat-card格式表示。这部分实际上是作为另一个组件完成的，但为了这个例子，我会尽可能地让它变得基本。

我的例子类似于这个结构：

<style>
    .my_action { border: 2px solid red; }
</style>

<div class="drop_area" cdkDropList>
    <div *ngFor="let action of actions"
        (cdkDragStarted)="dragStart($event, action)"
        (cdkDragMoved)="dragMoved($event, action)"
        (cdkDragEnded)="dragEnded($event, action)" cdkDrag>

        <mat-card class="my_action">
            {{ action.name }}
        </mat-card>

    </div>
</div>

在角分量中

dragStart(e, action) { 
    // initialize start X coord
    this.startX = 0;

    // initialize start Y coord
    this.startY = 0;
}

dragMoved(e, action) {
    // record new position
    this.endX = e.pointerPosition.x;
    this.endY = e.pointerPosition.y;

    // logic to set startX …

我正在尝试将我的项目从angular 5更新到angular7。为此，首先在本地更新@ angular / cli，然后在本地安装@ angular / cli，然后更新ng模块和其他相关命令。

现在，我检查ng --version，它显示的是我的角度7，但是我的项目没有运行，总是抛出以下错误：

Below is my script in package.json file:

"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --port=9000 -- 
   content-base wwwroot/",
   "build": "cross-env NODE_ENV=development webpack --progress",
   "prod": "cross-env NODE_ENV=production webpack  --progress"
 }

有没有一种方法可以混淆AnAngular 6（或7）应用程序的生产代码。生产代码是指在ng build --prod命令之后生成的dist文件夹。我见过一个名为Jscrambler的软件，但它不是免费的。我怎样才能做到这一点 ？

谢谢

我正在尝试为我的 Angular 7 应用程序配置用户登录，并且已经构建了大部分cognitoUser.authenticateUser()方法，但是在该onSuccess()方法中，我无法刷新 AWS 配置凭证，因为我在以下位置收到以下错误AWS.config.credentials.refresh()：

“‘Credentials | CredentialsOptions’类型不存在‘refresh’属性。‘CredentialsOptions’类型不存在‘refresh’属性。”

auth.service.ts：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import * as AWS from 'AWS-sdk';
import { CognitoIdentityCredentials } from 'AWS-sdk';
import * as AmazonCognitoIdentity from 'amazon-cognito-identity-js';
import credentials from '../../../../server/credentials.json';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  user: AmazonCognitoIdentity.CognitoUser;

  userPool;
  userData;

  isAuthenticated: boolean;

  constructor(private router: Router) {
    const poolData = {
        UserPoolId: '*****',
        ClientId: credentials.appClientId
    }

    this.userPool = new …

运行 npm test 时出现错误

Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'. ("dth">
        <input matInput placeholder="Product Name" formControlName="prod_name"
               [ERROR ->][errorStateMatcher]="matcher">

我的Spec文件如下

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { ProductAddComponent } from './product-add.component';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

describe('ProductAddComponent', () => {
  let component: ProductAddComponent;
  let fixture: ComponentFixture<ProductAddComponent>;

  beforeEach(async(() => …

升级到angular7后,"npm install"步骤中的azure构建失败.在当地一切正常.

我试过了:

1. 将构建定义中的clean选项设置为true,并设置为"all directories".
2. 在安装步骤之前强制npm更新"npm @ latest -g"步骤
3. 将Portal中"应用程序设置"中的"WEBSITE_NODE_DEFAULT_VERSION"设置为与本地版本相同的版本(10.14.1).

但我仍然从"npm install"步骤获得以下错误输出.(请注意,代理程序未使用与默认值设置相同的版本)

我的最后一个选项(我认为)是删除整个服务并创建一个具有相同名称的新服务 - 但我想避免这样做..

关于输出中的最后一个错误(npm ERR!404 Not Found:har-validator@5.1.2),我不知道这是什么,但它不包含在我的package.json中.我相信它可能是cli包正在使用的东西？

2018-12-11T21:46:07.1672265Z ##[section]Starting: npm install
2018-12-11T21:46:07.1675810Z ==============================================================================
2018-12-11T21:46:07.1675868Z Task         : npm
2018-12-11T21:46:07.1675929Z Description  : Run an npm command
2018-12-11T21:46:07.1675961Z Version      : 0.2.27
2018-12-11T21:46:07.1675996Z Author       : Microsoft Corporation
2018-12-11T21:46:07.1676309Z Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613746)
2018-12-11T21:46:07.1676342Z ==============================================================================
2018-12-11T21:46:07.7212998Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" config list"
2018-12-11T21:46:25.4985558Z ; cli configs
2018-12-11T21:46:25.4985985Z metrics-registry = "https://registry.npmjs.org/"
2018-12-11T21:46:25.4986124Z scope = ""
2018-12-11T21:46:25.4986277Z user-agent = "npm/6.4.1 node/v10.13.0 …

我有一个应用程序,它使用Angular 7作为前端,ASP.Net Core 2.2用于服务API.当我使用Google Chrome浏览器发送POST或PUT请求时,我收到ERR_INVALID_HTTP_RESPONSE错误消息.

当我将.Net Core降级到2.1版时,一切正常

此外,当我在Firefox中测试我的应用程序时,一切都运行良好!

我不知道如何解决这个问题

我使用的是谷歌Chrome版本71

当我查看Google Chrome中的"网络"标签时,我发现Chrome也向服务器发送了预检请求...

以下是"网络"标签中记录的内容:

第一:

Request URL: http://localhost:12346/api/XXXX
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:12346
Referrer Policy: no-referrer-when-downgrade

然后:(导致错误)

Request URL: http://localhost:12346/api/XXXX
Referrer Policy: no-referrer-when-downgrade

如您所见,chrome不会向POST服务器发送任何请求(应该发送).

我一直试图从Angular Material 实现这个表的例子而没有运气

我不明白我做错了什么,我的REST端点提供的数据在控制台输出上清晰可见.

我的怀疑是,当表格被渲染时,数据可能还没有完全加载.任何帮助表示赞赏,谢谢!

lap.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {Router} from '@angular/router';
import {LapService} from '../shared/services/lap.service';
import {Lap} from '../shared/model/lap.model';

@Component({
  selector: 'app-lap',
  templateUrl: './lap.component.html',
  styleUrls: ['./lap.component.css']
})
export class LapComponent implements OnInit {

  displayedColumns = ['id', 'year', 'lap', 'shortcut flag', 'start place', 'destination place', 'length', 'height difference'];
  dataSource: MatTableDataSource<Lap>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  constructor(public rest: LapService, private router: Router) {
  }

  ngOnInit() {
    this.dataSource = …

我在div中输入了文本。单击输入应将其设置为焦点并停止div click事件的冒泡。我尝试了stopPropagationand preventDefault在文本输入事件上，但无济于事。控制台日志显示div单击仍然执行。如何停止div点击事件的执行？

// html
<div (click)="divClick()" >
  <mat-card mat-ripple>
    <mat-card-header>
      <mat-card-title>
        <div style="width: 100px">
          <input #inputBox matInput (mousedown)="fireEvent($event)" max-width="12" />
        </div>
      </mat-card-title>
    </mat-card-header>
  </mat-card>
</div>


// component
@ViewChild('inputBox') inputBox: ElementRef;
divClick() {
    console.log('click inside div');
}

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    e.stopPropagation();
    e.preventDefault();
    console.log('click inside input');
    return false;
}

我在我的JHipster angular 7应用程序中使用Google图表。

在index.html中添加了以下脚本标记，以加载Google图表可视化库

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
</script>

图表工作正常，但是我的应用程序在整个过程中变慢了。

如果我在浏览器中移动鼠标，浏览器的CPU使用率会达到很高（100％），这会导致浏览器挂起，重新启动速度慢等。

如果我对图表div进行评论，则不会出现此类问题。

是否还有其他解决方案，例如通过webpack加载脚本？