标签: angular12

当我为 Ionic 5 应用程序提供服务时，出现以下错误：

Uncaught TypeError: Failed to construct \'HTMLElement\': Please use the \'new\' operator, this DOM object constructor cannot be called as a function.\n    at Reflect.<anonymous> (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261:93)\n    at new _.C.HTMLElement (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:338:225)\n    at new HostElement (index-7a8b7a1c.js:1847:17)\n    at DefaultDomRenderer2.createElement (platform-browser.js:645:1)\n    at BaseAnimationRenderer.createElement (animations.js:249:1)\n    at createElementNode (core.js:5759:1)\n    at \xc9\xb5\xc9\xb5elementStart (core.js:14957:1)\n    at AppComponent_Template (template.html:3:3)\n    at executeTemplate (core.js:9705:1)\n    at renderView (core.js:9508:1)\njs?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261 Uncaught TypeError: Failed to construct \'HTMLElement\': Please use the \'new\' operator, this DOM object constructor cannot be called as a function.\n    at …

我正在 Angular 12 中尝试 ngx-charts 库，但我不断遇到这个问题：

类型“any[]”不可分配给类型“[number, number]”。

目标需要 2 个元素，但源可能更少。

我不知道这个错误意味着什么。

这是代码：

HTML：

<ngx-charts-linear-gauge 
  [view]="view" 
  [scheme]="colorScheme" 
  [value]="value" 
  [previousValue]="previousValue" 
  (select)="onSelect($event)" 
  [units]="units"
>
</ngx-charts-linear-gauge>

TS：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  single: any[];
  view: any[] = [400, 400];
  colorScheme = {
    domain: ['#aae3f5']
  };
  value: number = 43;
  previousValue: number = 70;
  units: string = 'counts';

  onSelect(event) {
    console.log(event);
  }

}

关于错误的含义以及如何解决这个问题有什么想法吗？

ts配置代码是：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": …

我正在使用 Angular 12，在我的 component.html 中，我需要有一个 3 级条件。

例如：

我有一个列表，我需要检查它是否包含字符串。

true 和 false 状态都有不同的输出，最后我需要针对任何其他条件进行 ELSE。

所以......首先我有一个条件：

<div *ngIf="list.includes('sometext') && listitem === null ">Condition 1</div>

现在的条件与上述相反：

<div *ngIf="!list.includes('sometext') && listitem === null ">Condition 2</div>

最后是ELSE：

<div>Condition 3 or Any other condition from the others above</div>

我怎样才能做到这一点？

您好，我在 Angular 12 中的组件中使用时遇到问题（从视图来看是否有效）。

这是我安装的一个管道，尽管我已经尝试过几个并且发生了同样的事情。

具体来说，就是这个https://www.npmjs.com/package/@josee9988/filter-pipe-ngx

我这样做：

app.module.ts

..

import { FilterModule } from '@josee9988/filter-pipe-ngx';
..

imports: [FilterModule],
..

providers: [FilterModule],
..

Y en comp1.component.ts

import { FilterModule } from '@josee9988/filter-pipe-ngx';

..

constructor(private FilterModule_: FilterModule) { }

..

funcion1 () {
   this.v1 = this.FilterModule_.transform(this.v2, "gfg", v3);
}

..

他告诉我“错误 TS2339：属性‘transform’在类型‘FilterModule’上不存在”

它甚至不让我使用 ng 服务。

感谢。

此致。

我正在 Angular-12 工作。在我们的系统中，我们使用“Google Translate”API。

因此，当我们尝试批量翻译字符串时，API 会返回错误

 {
  "error": {
    "code": 400,
    "message": "Too many text segments",
    "errors": [
      {
        "message": "Too many text segments",
        "domain": "global",
        "reason": "invalid"
      }
    ]
  }
}

这是我们在 API 中发送的数据类型，

我们正在使用的 API https://translation.googleapis.com/language/translate/v2?key=Alza......。

 {
        "source":"en",
        "target":"es",
        "q":["string1", "string1",......]
    }

任何形式的帮助都是值得的，谢谢。

我已将 Angular 应用程序从 12 版本升级到 13 版本。我在单元测试运行期间开始收到此错误。

Chrome Headless 94.0.4606.61 (Windows 10) AppComponent should create the app FAILED
        TypeError: Cannot read properties of undefined (reading 'match')
            at extractCommentsWithHash (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:9130:18)
            at ShadowCss.shimCssText (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:8694:34)
            at map (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22402:26)
            at Array.map (<anonymous>)
            at compileStyles (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22401:19)
            at compileComponentFromMetadata (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:21948:13)
            at CompilerFacadeImpl.compileComponentFromMeta (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22570:21)
            at CompilerFacadeImpl.compileComponent (http:###/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2020/compiler.mjs:22560:21)
            at Function.get (http:###/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:24583:47)
            at getComponentDef (http:###/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:1119:16)
        Failed: Cannot read properties of undefined (reading 'match')

我尝试了这个解决方案，但没有成功。

manually remove package-lock.json
manually remove folder node_modules
npm install

您有任何解决办法吗？与 Angular 版本升级有关吗？

在基于 Angular 12 的 Web 应用程序的另一个组件中，我已经使用ng-containerwith*ngFor来迭代数组并显示数组中每个项目的控件，如下所示：

<ng-container *ngFor="let parameter of parameters">
    ....
</ng-container>

现在我需要做几乎相同的事情，但不需要迭代任何东西。我只是想要一个定义了变量的容器，然后我可以在容器内使用该变量。我已经尝试使用*ngVar代替，*ngFor但后来出现此错误：

无法绑定到“ngVar”，因为它不是“ng-container”的已知属性。

我怎样才能像我已经对单个变量所做的那样做同样的事情*ngFor而不迭代任何东西？我不想使用 a，div因为我不希望容器元素在渲染后实际存在于我的应用程序的 HTML 中。我认为有一个简单的解决方案，但到目前为止我还没有找到它。

以下是我想如何使用此功能：

<ng-container
  *ngFor="let parameterColumn of parameterColumns"
  matColumnDef="{{ parameterColumn }}"
>
  <th mat-header-cell *matHeaderCellDef>
    {{ parameterColumn }}
  </th>
  <td mat-cell *matCellDef="let element">
    <ng-container variable="parameter = getParameterById(element, parameterColumn)">
      ...
    </ng-container>
  </td>
</ng-container>

我需要创建一个站点地图页面，因为我的营销团队需要此页面用于 SEO 目的。他们有一个用 WordPress 构建的旧网站，它显示以下内容：

如何在Angular 12中实现此功能？

我将角度 10 更新为 12，现在当我尝试构建它时，会显示此警告：

Project 正在尝试禁用 Ivy 编译器。Angular 版本 12 及更高版本不支持已弃用的应用程序 View Engine 编译器。Ivy 编译器将用于构建该项目。

项目正在尝试禁用 ivy，但它正在我的项目中使用它，我应该以某种方式禁用它，还是因为一个包而使用它，我需要找到它？

我想禁用其中一个表单中的选择框，而在从服务器返回该选择框的数据之前，其中没有任何内容可供选择。我需要这样做，因为选择框中显示的数据取决于另一个选择框中选择的内容。每当在另一个选择框中选择某些内容时，我需要从服务器加载相应的选项。要在没有可用数据的情况下禁用选择框，我使用了如下所示的禁用属性：

<mat-select formControlName="formId" [disabled]="formNames.length === 0">
  <mat-option
    *ngFor="let formName of formNames"
    [value]="formName.id"
  >
    {{ formName.formName }}
  </mat-option>
</mat-select>

然后我订阅了valueChanges另一个选择框的事件，如下所示：

this.createForm.controls.formTypeId.valueChanges.subscribe((value: number) => {
  this.formsService.getFormNames(value).subscribe((formNames) => {
    this.formNames = formNames;
  });
});

虽然这似乎工作得很好，但我不断在浏览器控制台中收到以下警告：

  It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
  when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
  you. We recommend using this approach …

我正在以角度创建表单验证，但出现错误

未找到带有 exportAs 'ngModel' 的指令。

我的代码：

<form>
  <div class="form-group">
      <label for="firstname">First Name</label>
      <input type="text" id="name" name="name" required minlength="4" 
                     appForbiddenName="bob" ngModel #name="ngModel">
                     
      <div class="alert alert-danger" *ngIf>First name required</div>
  </div>
  <div class="form-group">
      <label for="comment">Comment</label>
      <textarea name="" id="comment" cols="30" rows="10" class="form-control"></textarea>
  </div>
  <button class="btn btn-primary">Submit</button>
</form>

错误：

     Error: src/app/app.component.html:6:60 - error NG8003: No directive found with exportAs 'ngModel'.
    
    6                      appForbiddenName="bob" ngModel #name="ngModel">
                                                                 ~~~~~~~
    
      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~

组件AppComponent的模板出现错误。

导入角度/文件模块后app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

如何在惰性特色模块上管理身份验证服务？

在添加一个名为的函数后，我收到此错误，ngInit该函数将调用类getCountries中的函数Service：

“类型‘Object’不能分配给类型‘null’”

import { Component, OnInit } from '@angular/core';
import {MessageService} from './message.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'Tour of Heroes';

  countryData = null;
  constructor(private api:MessageService) {}
  ngOnInit() {
    this.api.getCountries().subscribe((data)=>{
      this.countryData = data;
    });
  }

}