标签: angular7

我试图转到mat-paginator的第一页，即重置分页，但不起作用。知道如何解决吗？

我的 html 是这样的

<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
    </mat-paginator>

打字稿：

   getPublicationFollowersData(event?: PageEvent) {
      this.getPublicationsUser(event.pageIndex);
}

我尝试使用以下方法初始化页面：

this.page = 1

但它不起作用。

在我的 Angular 应用程序中一切正常。但是现在突然我收到以下错误并且我的浏览器卡住了。

限制导航以防止浏览器挂起。见<URL>。命令行开关--disable-ipc-flooding-protection可用于绕过保护

我在过去 2 天内所做的是更新 npm。运行npm audit fix以修复漏洞。之后，我收到此错误。

它正在循环，我无法通过浏览器访问我的应用程序。

我也添加了一些代码。可能是某些代码导致循环？

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

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

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

有没有办法动态创建拖放区？我在使用ngFor和cdkDropList时遇到了一些麻烦.

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个清单:

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在,带有'conta'类的div在*ngFor中.

我想,我的问题是我的第二个清单.如果我将一个元素从第二个列表拖到列表一,它可以正常工作,但如果我尝试将元素从列表一拖到第二个列表中的任何列表实例,它就无法识别该元素是否被拖动.在这里演示:

我在这里做错了吗？打字稿部分工作正常.

谢谢

任何想法为什么没有正确应用角度材料样式？

我知道对此有很多问题，但我似乎无法找到解决我问题的方法。我已经在几个项目中毫无问题地使用了角度材料，但似乎无法弄清楚这里发生了什么。
我可能忽略了一些简单的东西，但就是看不到它。我刚刚升级到 angular 7，所以它可能与此有关。

这是我的对话框，它只显示在带有奇怪或没有样式的父页面中。它正在做一些事情，因为与取消按钮相比，您可以看到按钮略有变化。

<div>
  <h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
    <div>
        <div>
          <mat-form-field>
              <mat-label>Title</mat-label>
              <input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
              <mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
          </mat-form-field>
        </div>
        <div>
          <button (click)="this.dialogRef.close()">Cancel</button>
          <button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
        </div>
      </div>
</div>

import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-new-course-item-dialog',
  templateUrl: './new-course-item-dialog.component.html',
  styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit { …

我创建了一个简单的项目,我已经安装了Bootstrap 4.但似乎加载页面需要8-10秒,CPU使用率为100%. 这是CPU使用率很高的桌面配置.

我通过AOT运行项目,其中ng服务--aot.在低CPU桌面上进行测试时,加载页面需要20-30秒.那么Angular是如何工作的,或者我们可以改进它并使用这种配置在低CPU桌面上加载一秒钟吗？

这是低CPU桌面上Angular的加载时序的屏幕截图.

即使在使用AOT之后,脚本编写部分也需要6-7秒来加载页面.这似乎很多.

具有8 GB RAM的台式机性能的屏幕截图.

由于CPU使用率很高,因此在低CPU设备上花费很长时间来加载页面.

下面是我的Angular JSON文件:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/testapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": …

我正在尝试实现分页，但是没有用。这是我的代码：

pager.service.ts：

  import * as _ from 'underscore';
  @Injectable({
      providedIn: 'root',
  })
export class PagerService {
  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {

    // calculate total pages
    let totalPages = Math.ceil(totalItems / pageSize);

    let startPage: number, endPage: number;
    if (totalPages <= 10) {
      // less than 10 total pages so show all
      startPage = 1;
      endPage = totalPages;
    } else {
      // more than 10 total pages so calculate start and end pages
      if (currentPage <= …

我正在研究小型Web应用程序,我使用angular 7和asp.net核心web api作为后端.我正在尝试使用angular发出http post请求.我的服务返回字符串(令牌),当我收到它时,我想在警告框中显示它.

我已经测试了我的服务,Postman一切都按预期工作.

从浏览器我的请求成功映射到控制器的操作方法.我在这个方法体中设置了断点,它成功返回令牌没有任何问题.

但httpclient返回错误:

[object Object]

在浏览器控制台中我看到:

POST https://localhost:44385/api/auth net::ERR_INVALID_HTTP_RESPONSE

我有两个方法(for POST和for GET)在服务类中注入组件.它们看起来像这样:

logIn(username: string, password: string) {

    const encodedCredentials = btoa(username + ':' + password);

    const httpOptions = {
        headers: new HttpHeaders({
            "Authorization": "Basic " + encodedCredentials,
            "Access-Control-Allow-Origin":"*"
        }),
        responseType: 'text' as 'text'
    };

    this.http.post(this.urlBase + 'auth', null , httpOptions)
    .subscribe(result => {
        alert(result);
    }, error => {
        alert(error); // [object Object]
    });
}

get(){
    return this.http.get(this.urlBase + 'auth', {responseType: 'text'});
} …

我想使用内容投影将一些属性从父组件传递给子组件，这可能吗？

例如，这是我的模板：

<my-form [display]="'horiz'">
  Email: <my-input [type]="'email'" ...></my-input>
  Name: <my-input [type]="'name'" [display]="'vert'" ...></my-input>
  ...
</my-form>

现在my-form组件有这样的模板：

<form ...>
  <ng-content></ng-content>
</form>

我想要的是组件可以访问的display属性，这样它也可以被组件覆盖，就像名称输入一样。my-formmy-inputmy-input

那可能吗？

我想在字符串上应用Reg表达式。为了获得所有组的结果，我使用matchAll方法。这是我的代码

const regexp = RegExp('foo*','g'); 
const str = "table football, foosball";
let matches = str.matchAll(regexp);

for (const match of matches) {
   console.log(match);
}

在上面的代码编译期间，我得到了错误

类型““桌上足球，桌上足球”上不存在属性'matchAll'

在搜索此错误期间，我在stackoverflow上发现了类似的问题

TS2339：类型“字符串”上不存在属性“包含”

我按上面链接中所述更改了tsconfig配置，但我的问题没有解决

这是我的tsconfig代码；

{
 "compileOnSave": false,
 "compilerOptions": {
 "baseUrl": "./",
 "importHelpers": true,
 "outDir": "./dist/out-tsc",
 "sourceMap": true,
 "declaration": false,
 "module": "es2015",
 "moduleResolution": "node",
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "target": "es2016",
 "typeRoots": [
  "node_modules/@types"
 ],
"lib": [
  "es2018",
  "dom"
]
}
}