小编Fus*_*sin的帖子

我正在使用Angular的新HttpClient来处理请求.当我使用旧的http时,我的组件返回正文文本,但现在正文文本为空.我无法弄清楚,服务器正在发送它,但我总是收到null作为正文.

响应的每个其他部分都是正常的,状态为200等.放置和删除都需要明文成功消息.我也尝试使用.body方法获取正文文本,并返回null.

服务:

constructor(private http: HttpClient) {}

    sendAllow(country, allow) {
        if (allow === 1) {
            return this.http.put(`http://${this.address}/rest/geodrop/config/` +
                                 `${country}`, { observe: 'response' });
        } else {
            return this.http.delete(`http://${this.address}/rest/geodrop/config/` +
                                    `${country}`, { observe: 'response' });
        }
    }

零件:

this.whiteListService.sendAllow(a, b)
            .subscribe(
                (response) => console.log(response),
                (error) => {
                    console.log(error);
                }
        );

我已经能够升级angularjs元素指令以在角度4中使用.这是一个示例代码:

[myScores.js]

angular.module('app.components.directives.myScores', [])
.directive('myScores', function() {
  return {
    scope: {
      score: '=',
    },
    template: '<div>&gt;&gt;&gt; Your score is {{score}} &lt;&lt;&lt;',
    link: function(scope) {
      console.log("in myScores", scope)
    }
  };
});

[myScores.ts]

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
  selector: 'my-scores'
})
export class MyScoresDirective extends UpgradeComponent {
  @Input() score: number;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('myScores', elementRef, injector);
  }
}

注意我正在使用UpgradeComponent来升级myScores元素指令.我在属性指令上尝试过相同但是出错了.有没有办法升级属性指令？

这是我尝试升级属性指令:

[makeGreen.js]

angular.module('app.components.directives.makeGreen', [])
.directive('makeGreen', function() {
  return …

当我单击链接转到我的食谱页面时，在 shopping-edit.component.ts 中的 ngOnDestroy 方法期间取消订阅时出现错误。这是图像

点击链接时出错

这是我的 git 的链接https://github.com/CHBaker/First-Angular-App

和我的代码片段：

import {
    Component,
    OnInit,
    OnDestroy,
    ViewChild
} from '@angular/core';
import { NgForm } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';


import { Ingredient } from '../../shared/ingredient.model';
import { ShoppingListService } from '../shopping-list.service';

@Component({
    selector: 'app-shopping-edit',
    templateUrl: './shopping-edit.component.html',
    styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit, OnDestroy {
    @ViewChild('f') slForm: NgForm;
    subscription: Subscription;
    editMode = false;
    editedItemIndex: number;
    editedItem: Ingredient;

    constructor(private slService: ShoppingListService) { }

    ngOnInit() {
        this.slService.startedEditing
            .subscribe( …

我所有的 svg 在开发模式下都能完美运行，只要我运行 `ng build --prod --aot"，它们就不会加载。它们都回退到 png 图像。我不知道如何修复它。我有已经在github上，并尝试过

• 绝对路径
• 相对路径
• 绑定与插值

我正在使用 angular 4.4.3

和 angular/cli 1.5.4

html：

<img
    class="chain"
    src="../assets/svgs/LinkWardenChain.svg"
    alt="Linkwarden chain graphic"
    onerror="this.src='../assets/images/LinkWardenChain.png'"
>

另一个例子：

<img
    class="chain"
    [src]="ethernet1"
    alt="ethernet connected graphic"
>

*由于 3rd 方软件包支持，我目前无法升级到 angular 5

解决方案

感谢 Mathew 的回答，将文件路径添加到 cli assets 文件夹：

"assets": [
        "assets",
        "favicon.ico",
        "./src/assets/svgs/eth-100.svg",
        "./src/assets/svgs/eth-1000.svg",
        ...etc...
      ],

我理解错误的根源,我正在测试的组件需要FormGroup将其传递给它@Input() form: FormGroup.在测试这个组件时,我无法弄清楚如何传递一个.

当我调用时,在每个函数之前出现错误,fixture.detectChanges()因此必须在该点之前传入表单

我当前的代码获取错误组未定义:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {
    ReactiveFormsModule,
    FormsModule,
    Validators,
    FormBuilder
} from '@angular/forms';
import { StaticComponent } from '../../firewall/static/static.component';

describe('StaticComponent', () => {
    let component: StaticComponent;
    let fixture: ComponentFixture<StaticComponent>;

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                declarations: [
                    StaticComponent
                ],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    FormsModule
                ],
                providers: [
                    NetworkService,
                    NetworkValidator,
                    HostNameValidator,
                    NotificationsService
                ]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(StaticComponent);
        component = fixture.componentInstance;
        component.ruleForm = …

我已经查看了有关此错误的问题,但尚未找到解决方案.

我有一个高亮指令,我接受输入index.当我在我正在使用它的模块中声明它时,该指令有效.但是我想在几个模块中使用它,所以我删除了声明,并将它放在导入错误的根模块中.那是我收到错误的时候:

 Error: Template parse errors:
Can't bind to 'index' since it isn't a known property of 'div'. ("
                <div class="read row"
                    appListHighlight
                    [ERROR ->][index]="index"
                >
                    <div class="col"></div>
"): ng:///NetworkModule/DnsComponent.html@15:20

我的指示:

import { Directive, Input, Renderer2, ElementRef, HostBinding, OnInit } from '@angular/core';

@Directive({
    selector: '[appListHighlight]'
})
export class ListHighlightDirective implements OnInit{
    @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

    @Input() index: string;

    constructor() {}

    ngOnInit() {

        console.log('APP', this.index);

        if (+this.index % 2 === 0) {
            this.backgroundColor = 'rgba(128, 128, 128, 0.08)'
        } …

我曾尝试在chart.js的包装div上将min-width设置为0，但是如果拖动窗口，则图表会增长，然后不会缩小。

我想不通！我唯一能做的就是将width设置为99％，但是图表不再与其他div对齐。我已经为此工作了好几天，请帮忙！

问：如何使chart.js的宽度为100％，并增大/缩小到其边界大小。

若要进行重现，请转到示例，如果关闭菜单，图表将增大，如果打开菜单，则图表不会缩小。它保持其大小并向右溢出。

注意：我的实际项目的图表和侧栏有两个单独的组件。因此，calc解决方案在这种情况下不起作用，我不想紧密耦合任何组件以保持良好的实践。

这是我的StackBlitz工作示例

这是显示复制品的图片：

1. 图表尺寸正确，菜单打开

2. 关闭菜单时图表会增大（大小仍然正确）

3. 打开菜单，图表右溢出

我有这种效果，我正在尝试使用计时器每x秒轮询一次数据。但是我不知道计时器应该如何与数据流交互。我尝试在顶部添加另一个switchMap，但随后无法将操作和有效负载传递给第二个switchmap。有任何想法吗？

我看了这篇文章，但情况有所不同。我正在通过需要访问的操作传递有效负载，并且正在使用ngrx 6。

@Effect()
getData = this.actions$
    .ofType(appActions.GET_PLOT_DATA)
    .pipe(
        switchMap((action$: appActions.GetPlotDataAction) => {
            return this.http.post(
                `http://${this.url}/data`,
                action$.payload.getJson(),
                {responseType: 'json', observe: 'body', headers: this.headers});
        }),
        map((plotData) => {
            return {
                type: appActions.LOAD_DATA_SUCCESS,
                payload: plotData
            }
        }),
        catchError((error) => throwError(error))
    )