标签: angular9

我试图捕获表单输入字段中发生的每个删除和退格键，并且我按照以下方式执行此操作：

<input (keyup.enter)="sendData()" (keyup.delete)="clear()" (keyup.backspace)="clear()">

它确实适用于退格键，但与左移或右移结合使用时则无效。我该如何承保这些案件？

我正在使用 Material 从事 Angular 9 项目。

我这里有一个演示示例：https://stackblitz.com/edit/mat-h ​​int-styling-issue?file=src/app/app.component.html

我正在使用带有垫子提示的输入。通常，mat-h​​int 将包含少量文本，但文本也可能非常大。如果发生这种情况，我想将垫子提示设置为更具响应性。

理想情况下，我希望 mat-h​​int 显示所有文本，但是现在它溢出到下一个输入的顶部。像这样： 相反，我希望它根据需要向下推下一个输入以显示其所有文本。我尝试将显示设为一个块，但没有帮助。

同样重要的是其他垫子提示（“必需！”）不受影响。

如果上述不可能（在不影响“必需！”或大量 scss 的情况下完成），那么我可以满足于在 mat 提示上设置最大高度，并使用省略号控制溢出文本。但是，当我添加最大高度时，文本会被截断，但不会以省略号结尾（即使在有：之后text-overflow: ellipsis）。

有什么样式建议可以使其响应更快吗？感谢您的任何提示或建议。

我正在使用 Angular，在我的 .ts 文件中我想获取不带扩展名的路径路径的文件名。

这是完整路径+文件名：

const fullpath = ["C:\Users\my.user\Desktop\the_filename.txt"]

我一直在尝试这个：

getFileNameOnly() {
  var fileName = "C:\Users\my.user\Desktop\the_filename.txt";
  var res = fileName.substr(fileName.lastIndexOf('.') + 1); 
  console.log(res);
}

上面返回错误：

TypeError: fileName.substr is not a function

我怎样才能做到这一点，以便结果是：

"the_filename"？

我正在尝试创建一个动态组件，它将采用 api url 和 IntervalPeriod 表示“x”分钟作为输入，并每隔 x 分钟获取作为输入传递的数据。

这是我尝试遵循所有 stackoverflow 答案的 stackblitz。

我需要在 0 秒时第一次显示数据，之后必须每隔 x 秒或每分钟获取数据。这看起来正确还是我在这里缺少什么？

https://stackblitz.com/edit/angular-wzvwmy?file=src%2Fapp%2Fdata-emitter%2Fdata-emitter.component.ts

import { Component, Input, OnInit, Output } from "@angular/core";
import { interval } from "rxjs";
import { flatMap, map } from "rxjs/operators";
import { Http } from "@angular/http";

@Component({
  selector: "app-data-emitter",
  templateUrl: "./data-emitter.component.html",
  styleUrls: ["./data-emitter.component.css"]
})
export class DataEmitterComponent implements OnInit {
  @Output() data: any;
  @Input() apiUrl: any;
  @Input() intervalPeriod: number;

  minutes: number;

  constructor(private http: Http) {}
  ngOnInit() {
    this.minutes = this.intervalPeriod …

在我的组件中，我使用 ViewChildren 获取了其标记模板列表：

@ViewChildren(TemplateRef) private _templates: QueryList<TemplateRef<unknown>>;

在 Angular8 中，我无法通过 Id 过滤它们，所以我需要寻找一个内部属性 - 这在某种程度上有点笨拙：

let template = this._templates.find(t => (<any>t)._def.references[id]) : null;

现在，使用 Angular 9，这不再起作用。我检查了对象，发现了一个新的“黑客”：

this._templates.find(t => (<any>t)._declarationTContainer?.localNames?.includes(id)) : null;

但是对于这种情况是否有任何新的或干净的解决方案？

仍然希望有一个没有自定义指令的解决方案，例如。MatTab 可能也会做类似的事情：

<mat-tab>
    <ng-template mat-tab-label>
        ...
    </ng-template>

    <ng-template matTabContent>
        ...
    </ng-template>
</mat-tab>

我将我的项目升级到 Angular 9。我正在使用 SSR，升级我的webpack.config.js变成webpack.config.js.bak. 现在我正在尝试做ng build --prod && ng run [projectName]:server:production

现在我收到此错误消息

    ERROR in ./node_modules/canvas/build/Release/canvas.node 1:2\n    Module parse failed: Unexpected character \'\xef\xbf\xbd\' (1:2)\n    You may need an appropriate loader to handle this file type, currently no loaders are configured \n    to process this file. See https://webpack.js.org/concepts#loaders\n    (Source code omitted for this binary file)\n

所以我尝试实现诸如此类的加载器node-loader，我需要知道我是否应该更新我的加载器server.ts，因为我可以看到webpack.config.js在我的情况下不再需要。

编辑：

我尝试过angular.json但仍然不起作用

"server": {\n          "builder": "@angular-devkit/build-angular:server",\n          "options": …

您好，我正在使用 Angular 9，我的代码如下： HTML 组件为“post-create.component.html”：

<mat-mat-form-field>
  <textarea rows="6" [(ngModel)]="enteredValue"></textarea>
</mat-mat-form-field>

我的app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/Card';
import { MatInputModule } from '@angular/material/input';



import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { from } from 'rxjs';


@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent, …

我有一个使用“*ngFor”循环显示的对象数组，当我调用 array.sort() 时，数组内部发生变化，元素的位置/顺序发生变化，但 angular 没有检测到变化，也没有t 重新触发“ngFor”循环。调用排序函数后如何更新我的用户界面。

我有一个我想测试的模态组件。但它总是抱怨“找不到名称'ngbNav'的导出”。关于如何解决这个问题的任何想法都会很棒。

Error: Export of name 'ngbNav' not found!
        at cacheMatchingLocalNames (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13112:1)
        at resolveDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12871:1)
        at elementStartFirstCreatePass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21229:1)
        at ??elementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21271:1)
        at TemplateModalComponent_Template (ng:///TemplateModalComponent.js:381:9)
        at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12129:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11899:1)
        at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13509:1)
        at renderChildComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11700:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11925:1)

模板modal.component.html

    <div class="modal-header">
  <h4 class="modal-title" ngbTooltip="{{template ? template.id : ''}}" triggers="click:blur">{{"template_edit" | translate}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form class="form" [formGroup]="this.templateFormGroup">
    <div formGroupName="template">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9"> …

上下文：使用 Angular 9。我正在尝试等待后端可用于接收请求。同时它不是，有一个进度条加载。

问题：当后端还不可用时，订阅立即失败并进入方法的（错误）回调函数，.subscribe()消息如下Http failure response for http://localhost:5555/api/info: 504 Gateway Timeout

我做了一些研究，我发现的示例修改了httpClient.get存在的服务类，以重试 x 次请求，但我不能这样做，因为 ts 服务是自动生成的。

我的第一个想法是使用 while() 循环和一个标志，因此每次执行 (error) 时，标志将为 false，然后重试订阅。但这会导致内存泄漏。

checkIfBackendAvailable() {
    var backendAvailable = false;
    while(!backendAvailable){
      let subscription = this.infoService.getInfo().subscribe(
      (info) => {
        if (info) {
            backendAvailable = true;
            this.progressBarValue = 100
            // do somethings
         }
       }
        ,
        (error) => {
          clearTimeout(this.infoTimeOut);
          this.showMessage("back-end not available");
          this.stopLoadingBar();
          //do somethings
        }
      );
    }

    this.infoTimeOut = setTimeout(() => {
      if (!backendAvailable) {
        subscription.unsubscribe() …