小编phy*_*boy的帖子

在过去的几天里,我一直在学习React,看一些关于你可以编写不同元素的不同方法的教程和解释.然而,有一个我最好奇的 - setState更新/覆盖state组件属性的功能.

例如,假设我有一个具有以下内容的类:

class Photos extends React.Component {
    constructor() {
        super()
        state = {
            pictures: []
        }
    }

   componentDidMount() {
      // This is where the fetch and setState will occur (see below)
   }

    render() {
       return {
          <div className="container">
             {this.state.pictures}
          </div>
       }
    }
}

这个例子看到我从API获取图像.

鉴于我已经为此函数执行了我的获取,映射和返回 - 然后我将pictures: []使用API​​调用中获得的结果更新状态数组.

我的问题源于我见过的关于如何更新/覆盖图片状态属性的不同方法.

我看过它有两种不同的方式:

1) 这似乎是一种非常简单易读的方法

this.setState({pictures: pics})

2) 这更复杂,但我认为它被描述为更安全的方法

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

有人可以解释使用其中任何一个的优点吗？我想在未来与代码保持一致,处理道具和状态等,所以最通用的方法当然是首选.

当我尝试从文件主机网站下载文件时,我遇到了通常的Chrome"功能",即显示"此类文件可能会损害您的计算机无法保留选项".

但是,当警告出现时,只有一个"丢弃"按钮,而不是像我在使用Windows时看到的那样"保留"文件...

有人可以提出什么建议吗？

我有一个带有输入的mat-form-field,我想添加一个自定义样式,但是我在官方Angular Material网站上找不到任何关于此的文档.

我最终的目标是:

• 选择输入框后更改下划线颜色
• 删除浮动标签(如果可能 - 我知道这是一个功能,但现在已弃用).

我不是最适合Angular的人,但是如果需要改变JS中的东西,那么我总能给它最好的机会.

我只需要一点指导.

现行代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

目前的CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

有没有什么方法可以阻止占位符作为以下代码片段的标签浮动？

<form class="search-form">
  <mat-form-field class="example-full-width">
     <input class="toolbar-search" type="text" matInput>
     <mat-placeholder>Search</mat-placeholder>
     <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

我已经查看了角度/材质的官方文档,但似乎这个功能现在已被弃用了？

我尝试过但未能找到重置角形的方法.

有人可以帮忙吗？

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

  resetForm() {
    this.thisIsAForm.reset();
  }
}

我正在尝试在我的组件上执行 HostListener，指定我希望在单击除特定元素之外的任何内容时发生某些事情；但是，我收到错误：

类型“EventTarget”上不存在属性“id”

代码在 UI 中运行良好，但我无法摆脱 linting 引发的错误。

我知道我必须为此使用类型，例如如果我对输入元素执行它。<div>但是我正在对正在单击的法线执行检查......

我不确定如何继续。

@HostListener('document:click', [$event'])
myClick(event: MouseClick): void {
  if (event.target.id !== 'some-id') {
    // do something here
  }
}

我一直在玩诸如此类的东西：

if (<HTMLElement>event.target.id...

但我找不到解决这个问题的方法......

我有一个使用数组和谓词来执行数组过滤的实用程序，但是在将我的自定义类型用于谓词后，我收到一条错误消息

类型“T”上不存在属性“名称”

我认为通用属性类型T会接受任何东西？

我错过了一些明显的东西吗？

数组.ts

export type arrayPredicate = <T>(arg: T) => boolean;

数组实用程序

static filterArray<T>(array: T[], arrayPred: arrayPredicate): T {
    const key =  Object.keys(array).find(obj => arrayPred(array[obj]));
    return array[key];
  }

测试中的使用

const array = [
  {
    'name': 'object-1',
    'id': 1
  },
  {
    'name': 'object-2',
    'id': 2
  }
];

it(... , () => {

  // I get red squigglies under '.name'

  const myObj = ArrayUtils.filterArray(exceptionalStatuses, 
                                          (status => status.name === findStatus));

  ...

});

当然，改变

有没有什么方法可以通过单击外部按钮来扩展特定的垫扩展面板？

我试过链接到面板的ID,但没有成功......

<mat-expansion-panel id="panel1"> ... </>
...
<button (click)="document.getElementById('panel1').toggle()>Click me</button>

这是我的stackblitz代码

我最终的计划是使用此方法打开从数组生成的列表中的不同面板: <mat-expansion-panel *ngFor="let d of data"> ...

我有一个元素，其中静态和动态文本的组合都在同一行上。

当通过包含一些静态和动态文本的子字符串测试此行文本时，它失败，显示输出被分割成多行，并且在动态部分之前和之后进行分割。

到底是怎么回事？为什么我不能按照我期望的方式测试它？我该如何正确测试这个？

代码.jsx

const dynamicText = 'all be on one line';

return <div>This should {dynamicText} like I expect.</div>

代码.spec.js

it('Should have dynamic text on one line', () => {
    const {getByText} = render(<Code />);

    expect(getByText('should all be on one line ')).toBeTruthy();
});

测试输出

Unable to find an element with the text: ... This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your …

我在用户界面中使用了下拉菜单，但是当我使用它时，却[formControl]抛出了错误：

找不到具有未指定名称属性的控件

我在中使用ReactiveFormsModule app.module.ts。

我已经用过Google，发现解决方案是在父级中使用[formGroup] div，但是我不确定如何正确地实现，因为我是formControl从中定义我的subscribe。

myComp.component.html

<div class="exceptional-status">
  <select #exceptionalSelect id="excep-status-dropdown" [formControl]="select">
    <option disabled value="default">--Exceptional statuses--</option>
    <!-- other options here with *ngFor -->
  </select>
</div>

myComp.component.ts

select: FormControl;

mySubscription() {
  this.myService.myFunct.subscribe(res => {
    this.select = new FormControl(res.status)
  });
}