标签: angular8

我正在尝试使用 forkJoin 来执行多个 http get 请求，然后使用 Angular 8 将所有结果组合成一个简单的数组。

问题是我最终得到了一个数组数组......而不是一个字符串数组

我的代码如下。所有端点都返回一个字符串列表。

autoCompleteValues: any;

ngOnInit() {

    let res1 = this.dataMessageService.getFoo1();
    let res2 = this.dataMessageService.getFoo2();
    let res3 = this.dataMessageService.getFoo3();
    let res4 = this.dataMessageService.getFoo4();
    let res5 = this.dataMessageService.getFoo5();

    forkJoin([res1, res2, res3, res4, res5]).subscribe(data => {

      this.autoCompleteValues = data;
      console.log(this.autoCompleteValues);
    });
}

我究竟做错了什么？如何将所有结果合并到一个大数组中？

我在我的解决方案中使用 ngx-quill 作为编辑器。现在我想向工具栏添加一个自定义按钮，它将在编辑器的内容区域中插入文本。

在工具栏中，我想显示“N”，该按钮会将文本：“[Name]”插入到光标所在的编辑器内容中。我怎样才能做到这一点？

在 Windows 10 上，ngserve 会一次又一次地进行编译，而不保存任何更改。即使当我在 vscode 中的两个文件之间切换时，它也会重新编译。

但是当我在 macOS 上运行相同的 Angular 项目时，它的行为正常。

当我使用自定义ngDoBootstrap函数而不是默认函数时bootstrap: [AppComponent]，如下所示：

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  exports: [ AppComponent ],
  entryComponents: [ AppComponent ],
  // bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  public ngDoBootstrap(): any {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);
  }
}

然后 应用程序路由被破坏。

它会忽略 URL 中的任何更改，并且仅在我单击 时才起作用 <a [routerLink]='...'>。此外，初始路线 / 未加载。

它一定是由自定义引导机制引起的，因为当我取消注释时bootstrap: [AppComponent]，一切正常。

完整代码可在此处获取：stackblitz 示例（由于 stackblitz 使用的 typescript 版本，需要下载并在本地运行）

如何使路由与自定义应用程序模块引导一起工作？

您好 在 Angular 8 中创建了一个项目。最初它只支持一种默认语言（US-EN）。然后我应用了本地化。

在准备生产构建的本地化之前，我曾经给出以下命令。

ng build --prod --base-href "/Windchill/com/qiwkCollaborator/"

本地化后，我在 angular.json 和 package.json 中做了一些更改。在进行这些更改后，每当我发出任何准备构建它的命令时，都会出现以下错误。

An unhandled exception occurred: Configuration 'production' is not set in the workspace.

Package.json 文件的某些部分如下：

"name": "qwik-collaborator",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-locale:en": "ng build --prod --i18n-locale en --i18n-format xlf --i18n-file src/translate/messages.en.xlf --output-path=dist/en --baseHref /en/",
    "build-locale:fr": "ng build --prod --i18n-locale fr --i18n-format xlf --i18n-file src/translate/messages.fr.xlf --output-path=dist/fr --baseHref /fr/"

Angular.json …

我正在使用 Angular 8 并使用 ngx-translate 实现国际化 (i18n)。我使用了以下库。

1. "@ngx-translate/core": "^13.0.0",
2. “@ngx-translate/http-loader”：“^6.0.0”。

在运行这个 angular 项目时，我遇到了那个错误。

请帮我解决这个错误。

这是完整的错误：

ERROR in node_modules/@ngx-translate/core/lib/translate.directive.d.ts:14:9 - error TS1086: An accessor cannot be declared in an ambient context.

    node_modules/@ngx-translate/core/lib/translate.directive.d.ts:15:9 - error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@ngx-translate/core/lib/translate.service.d.ts:49:9 - error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@ngx-translate/core/lib/translate.service.d.ts:56:9 - error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@ngx-translate/core/lib/translate.service.d.ts:63:9 - error TS1086: An accessor cannot be declared in an …

我想等待一个函数完成，然后再执行它旁边的函数。我有一个名为getData() 的函数，其中发生了 http 调用，它返回一个 observable。第二个函数checkDuplicate()我们订阅了该函数getData()。我们有第三个函数，称为proceed()，我们在其中调用checkDuplicate()函数，一旦checkDuplicate()函数完成，我们就会调用alert("finished")。但这里的问题是在checkDuplicate()函数完成之前，警报已经被触发。

找到代码以获得更好的说明：

getData(): Observable<any>{
  return this.http.get<any>(URL...);
}

checkDuplicate(){

return this.getData().subscribe(response => {
   if(response){
      console.log("Inside");
  }
});
}

proceed(){
 this.checkDuplicate();
 console.log("finished");
}

实际结果

完成的

里面

预期结果

里面

完成的

我试过asyn/await等待 checkDuplicate() 函数完成。但是还是没有用。如果您分享解决方案，将不胜感激。提前致谢 ！！！

我知道 google 引用错误出现的原因是因为在服务器上执行的 sever.js 没有在其范围内定义 google 。我正在寻找解决方案来修复此错误。

运行后npm run serve:ssr得到这个

task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: google is not defined
          at new exports.ListingsComponent (/home/abhishek/projects/website/dist/server.js:50760:350264)
          at createClass (/home/abhishek/projects/website/dist/server.js:79119:20)
          at createDirectiveInstance (/home/abhishek/projects/website/dist/server.js:78988:20)
          at createViewNodes (/home/abhishek/projects/website/dist/server.js:87348:36)
          at createRootView (/home/abhishek/projects/website/dist/server.js:87262:5)
          at Object.createProdRootView [as createRootView] (/home/abhishek/projects/website/dist/server.js:87774:12)
          at ComponentFactory_.create (/home/abhishek/projects/website/dist/server.js:78467:29)
          at RouterOutlet.activateWith (/home/abhishek/projects/website/dist/server.js:183250:40)
    },
    scheduleFn: undefined,
    cancelFn: …

有没有一种方法可以检查表单控件是否被禁用？

this.form.get("nationality").disable()

禁用此控件。

我可以检查此控件是否在重置方法中禁用。如果禁用，则不需要重置该值。

我该如何检查。

onReset(){
 if(this.form.get("nationality").isDisable()){// its wrong
let name =this.form.get("nationality").value;
}else{
let name = null;
}
 this.form.reset({
        name: name
    });

}

我使用 S3 和 CloudFront 服务在 AWS 中托管我的 Angular 9 应用程序。访问应用程序后，我在浏览器中收到以下错误：

\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/polyfills-es2015.5af60e74e954ace452ee.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/main-es2015.9d477ae8338087e639b5.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
\n

我的index.html：

<!doctype html>\n<html>\n<head>    \n  <meta charset="utf-8">\n  <title>ReachApp Success</title>\n  <base href="/reach">\n    <!-- TODo: check for common configuration for material icon -->\n    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> \n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="icon" type="image/x-icon" href="favicon.ico">\n  <script src='https://www.google.com/recaptcha/api.js' async\xc2\xa0defer></script> \n<link rel="stylesheet" href="styles.7f06624db32e037ad1c6.css"></head>\n<body>\n  <reach-root></reach-root>\n …