标签: angular8

更新到 Angular 8，我所有使用 angular flex 并具有 ngClass 的代码都被破坏了：

<div class="pages-container"
       [ngClass.lt-md]="{'mobile-no-padding': true}">
    <router-outlet></router-outlet>
  </div>

渲染时返回错误： ERROR TypeError: this._delegate.setClass is not a function

只能通过删除动态响应后缀 ( [ngClass]="{'mobile-no-padding': true})来解决此问题，但这是一个很大的倒退......

我正在创建一个Angular + Cordova应用程序，它在浏览器中效果很好。

我面临的问题是，当我尝试包含cordova.js文件时，该应用程序在加载到设备上后变为空白。我做了一些研究，它原来是用的东西cordova.exec，并zone.js在角使用造成的问题。

我想要一个关于如何正确包含cordova.js在基于Angular的项目中的解决方案。

科尔多瓦

android 8.0.0
ios 5.0.1

角度的

@angular-devkit/architect         0.801.1
@angular-devkit/build-angular     0.801.1
@angular-devkit/build-optimizer   0.801.1
@angular-devkit/build-webpack     0.801.1
@angular-devkit/core              8.1.1
@angular-devkit/schematics        8.1.1
@ngtools/webpack                  8.1.1
@schematics/angular               8.1.1
@schematics/update                0.801.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

在我的文件中，var.sass我定义了变量$black. 我想在我的所有components.sass文件中使用该变量。为此，我需要写入@import每个文件还是有更好的解决方案来做到这一点？

我们都知道，components.sass当我将此类文件导入全局styles.sass文件时，我不能在内部使用这些变量。

调用返回承诺的函数时，除非删除异步运算符，否则返回未定义，然后返回 ZoneAwarePromise，但不包含任何数据。

我知道查询在函数执行时返回数据，但是它似乎没有将该数据传递给函数调用的实际返回部分。

我查看了几个没有回答这个问题的堆栈问题，包括这个问题： Async/Await with Request-Promise Returns Undefined

这是使用 REST 端点来提取数据，console.logs 确实显示数据是正确的，但是返回未定义

     this.allPeople.forEach(async person => {
          const dodString = await this.getRelatedRecords(person); //undefined
    }

这是返回承诺/数据的主要功能

async getRelatedRecords(person) {
    // function truncated for clarity
    // ...
    //
    console.warn('This async should fire first');
    selPeopleTable.relationships.forEach(relationship => {
    allRelationshipQueries.push(
      arcgisService.getRelatedTableData(
        selPeopleTable.url, [person[oidField.name]], relationship.id, relationship.name),
      );
    });
    await Promise.all(allRelationshipQueries).then(allResults => {
      console.log('Inside the Promise');
      // The Specific node I am looking for
      const data = allResults[1].results.relatedRecordGroups[0].relatedRecords[0].attributes.dod;
    console.log(data); // Shows correctly as the data …

正如问题所暗示的那样，我试图找出一种在页面加载后为元素设置动画的方法。我已经找遍了所有地方，但似乎有太多并且无法同时执行此操作，我希望得到一些指导。在移动设备中加载页面后，徽标应该会慢慢朝右上方移动并缩小尺寸（如果有意义的话）。

我正在寻找 Angular 等价物 $(document).ready(function() {}

根据建议，我已经使用过，ngAfterViewInit()但仍然无法正常工作。

以下 index-section.component.html

<section class="index-section">
  <div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
    <figure>
      <img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
    </figure>
  </div>
  <div class="index-media-wrapper">
    <div class="media-container">
      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
    </p>
  </div>
</section>

而 index-section.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { trigger, state, …

单击我尝试过的按钮后，我想更改所选行的背景颜色，但更改所有行的颜色。这是一个类似的代码。

HTML

<tr *ngFor="let data of (datas$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse" [ngClass]="{'data-selected':isSelected}">
    <td>{{data.id}}</td>
    <td>{{data.text}}</td>
    <td>
       <a class="mr-3" (click)="delete(data.id)"><i class="fa fa-remove"></i>
            Remove
       </a>
    </td>
</tr>

TS

delete(postId) {
    this.isSelected=true;
    const ans = confirm('TEXT TEXT '+dataid);
    if (ans) {
      this.dataService.deleteData(postId).subscribe((data) => {
        if(data) {
          this.showSuccessDelete();
        } else {
          this.showError();
        }
        this.isSelected=false;
        this.loadDatas();
      });
    }
  }

CSS

.data-selected{
  background-color: #e9eaea;
}

非常感谢

我有一个自定义组件<app-button><span></span></app-button>。

它具有 CSS 样式，例如：

span:hover {
   color: red;
}

当我在另一个组件中使用此组件并尝试在父组件中应用 CSS 样式时，它没有效果：

<app>
<app-button></app-button>
</app>

app我尝试过的内部组件：

  app-button span:hover {
       color: green;
    }

它对我不起作用

将子组件表单放入父组件表单的最佳方法是什么？我们使用的是 2019 年最新的 Angular 8。经过研究，以下方法不能完全奏效。

父组件：

 ngOnInit() {
    this.parentForm = this.fb.group({
       childForm1: etc
    })

子组件：

this.ChildForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetType': [null, [Validators.maxLength(8)]],
  'city': [null, [Validators.maxLength(32)]],
  'state': [null, [Validators.maxLength(16)]],
  'postalCode': [null, [Validators.maxLength(16)]],
}, { validator: atLeastOneLocationRequired })

}

方法一：

这个方法，https: //itnext.io/partial-reactive-form-with-angular-components-443ca06d8419 经过严格测试表明 ParentForm 有效，即使 Child Form 无效。这不应该发生。

ngOnInit() {
  this.parent = this.fb.group({
    fullName: null
  })

}

formInitialized(name: string, form: FormGroup) {
  this.checkoutForm.setControl(name, form);
}

方法二：

方法 2 使用 ViewChild，这是听力不好的做法。 https://davembush.github.io/attaching-an-angular-child-component-s-form-to-a-parent/

@ViewChild(ChildComponent) childComponent: ChildComponent;

And now in ngAfterViewInit() …

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

正如您在上面看到的，我们为日期输入即picker1 和picker 提供了唯一的ID。问题仍然存在“MatDatepicker 只能与单个输入相关联。” 不知从何而来。我需要帮助。我在谷歌和stackover上搜索过，但没有帮助

我在 angular8 工作并面临一个问题，

为了动态加载我的样式，我使用了波纹管代码并且它运行良好，但是当我将包更新"@angular-deficit/build-angular": "^0. 800.0"为 时"@angular-deficit/build-angular": "^0. 803.21"，它停止工作。该应用程序运行良好，终端和浏览器控制台中没有错误，但应用程序上未实现样式。

declare function require(name: string): any;
 ngOnInit() {
    require('style-loader!./file-path');
}

包.json

{
"name": "latest-frontend-theme",
"version": "0.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": …