小编Fak*_*ire的帖子

我想在单击时同时触发两个动画。动画触发器使用相同的状态，一个放置在外部父 div 上，另一个嵌套在该 div 内。样式已更改，但过渡仅应用于父组件。我在我的父动画中使用了 animateChild 但没有成功。如何在父元素和子元素上应用动画？

动画.ts

import {
  trigger,
  state,
  style,
  transition,
  animate,
  query,
  group,
  animateChild,
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none"
        })
      ),
      transition("false <=> true", [
        group([
          query("@colExpansion", [animateChild()]),
          animate("3s ease")
        ])
      ])
    ]),
    trigger("colExpansion", [
      state(
        "true",
        style({
          "-webkit-box-flex": "0",
          flex: "0 0 66.66667%",
          "max-width": "66.66667%"
        })
      ),
      state(
        "false",
        style({
          "flex-basis": "0",
          "-webkit-box-flex": "1", …

我试图测试当单击模态上的“关闭按钮”时模态组件中的 closeModal 函数是否正在工作，但是此测试将我的按钮元素显示为空。我收到错误“无法读取 null 的属性‘triggerEventHandler’。” 我该如何解决这个问题？

modal.component.ts

import { AppComponent } from "./../app.component";
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { ModalComponent } from "./modal.component";
import { By } from '@angular/platform-browser';

describe("ModalComponent", () => {
  let component: ModalComponent;
  let fixture: ComponentFixture<ModalComponent>;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [ModalComponent, AppComponent]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });

  it("should test closeModal method on close button", () …

我有一个嵌套在父动画中的子动画。父动画阻止子动画过渡。更改已触发，但没有转换。如何实现这种转换并同时触发两个动画？

动画.ts

import {
  trigger,
  style,
  transition,
  animate,
  state
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger('expansionTrigger', [
      state('true', style({
        height: '*'
      })),
      state('false',  style({
        height: 0
      })),
      transition('false <=> true', animate(3000))
    ]),
    trigger('colExpansion', [
      state('true', style({
        "-webkit-box-flex": "0",
        flex: "0 0 66.66667%",
        "max-width": "66.66667%"
      })),
      state('false',  style({
        "flex-basis": "0",
        "-webkit-box-flex": "1",
        "flex-grow": "1",
        "max-width": "100%"
      })),
      transition('false <=> true', animate(3000))
    ])
  ]
};

内容.组件.html

<div [@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'">
 <div [@colExpansion]="isExpanded === 'true' …

我正在构建一个可重用的导航“选项卡”组件，我希望将选定的选项卡设置为“true”，以便单击时选择 aria-selected，但是单击时所有三个选项卡的 aria-selected 保持为 false。如果单击单个选项卡，如何将其设置为 true？

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabs = [
    { tabName: 'tab1' },
    { tabName: 'tab2' },
    { tabName: 'tab3' }
  ]
  selected: boolean;

  select(tab){
    this.selected = tab.tabName
  }
}

应用程序组件.html

<div role="tablist">
  <app-tabs 
  *ngFor="let tab of tabs" 
  (click)="select(tab)"
  [selected]="selected" 
  [tab]="tab">
  </app-tabs>
</div>

选项卡组件.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export …

我想将查询参数传递给 an ，*ngIf但由于是字符串类型，因此一直评估为 true 。如何将我的查询参数更改为布尔值，使其评估为 false？

查询参数是?paywall=true但对于查询仍然是正确的?paywall=false

组件.ts

ngOnInit() {
    this.paywallQuery$ = this.route.queryParamMap.pipe(map(params => params.get('paywall')));
}

组件.html

<div *ngIf="(paywallQuery$ | async)"> <-- always evaluates as true
</div>

我附加到 div 的 Angular 动画在 Chrome 中工作（将 0 的高度增加到高度：'*'）。我已经导入了所有必要的 polyfills 并安装了 web-animations-js

高度增加了，但是在 IE 和 Firefox 中没有发生动画过渡。

动画.ts

import {
  trigger,
  state,
  style,
  transition,
  animate
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*",
          display: "inline-block",
          width: "100%",
          overflow: "hidden"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none",
          padding: "0",
          overflow: "hidden"
        })
      ),
      transition("true => false", animate("1s 100ms ease-out")),
      transition("false => true", animate("1s ease-in"))
    ]),
    trigger("fadeInTrigger", [
      state(
        "true",
        style({ …

我试图围绕一个中心以圆周运动“环绕”两个单独的 div，但是我无法让两个 div 在我的 CSS 动画中遵循相同的圆形路径。

.container {
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  background-color: pink;
  width: 100px;
  height: 100px;
  animation: battle 6s linear infinite;
  position: absolute;
  margin: 10px;
}

@keyframes battle {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

提琴手

我有一个组件,我在第一个setState()中作为第二个setState()作为回调.这种做法很糟糕吗？还有另一种同步调用两个setStates的方法吗？

最初,当我在第一个setState()中调用updateData()时,在myComponent组件中呈现正确的数据时出现延迟.这是落后的"一步".这有效,但它是传统的吗？

import React, { Component } from "react";
import MyComponent from "../../components/MyComponent";
import RaisedButton from "material-ui/RaisedButton";
import { generateData } from "./generateData";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      data: []
    };
  }

  updateData(){
    this.setState({
      data: generateData(this.state.text)
    })
  }

  handleChange(e) {
    this.setState({
      text: e.target.value
    }, () => {
      this.updateData(this.state.text)
    });
  }

  handleSubmit(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div>
        <h2>Input</h2>
        <form onSubmit={e => this.handleSubmit(e)}>
          <textarea
            value={this.state.text}
            onChange={e => this.handleChange(e)}
          />
          <div>
            <RaisedButton …

我正在尝试将 name 属性动态设置为 *ngFor 内 Angular 数据表中的输入字段。但是，当我转到 console.log 时，我看到字段中 keyup 的过滤方法中的事件，没有为每个输入设置名称。如何动态添加这些名称？

表.组件.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)"
            role="button">
                <label>{{col.header}}</label>
                <input type="text"
                aria-label="search text field"
                name="{{col.header}}" <-- not being set
                ngModel
                placeholder="search..."
                (click)="$event.stopPropagation()"
                (keyup)="filterData($event)"
                *ngIf=col.enableFilter/>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data |
        filter: fields:selectedInput |
        paginate: { itemsPerPage: 6, currentPage: page, id: id }">
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

表.组件.ts

  filterData(e){
    console.log(e.target.name) <--- name is a …

我正在使用PrimeNG数据表.我在Angular中使用httpClient从JSON占位符中获取一些模拟数据.它在我的控制台中显示为一个对象数组,但Visual Studio代码错误表明它是一个对象.错误说"类型对象不能分配给任何[]." 这里有什么问题？

表layout.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { Component, OnInit, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Component({
  selector: 'app-table-layout',
  templateUrl: './table-layout.component.html',
  styleUrls: ['./table-layout.component.css']
})

export class TableLayoutComponent implements OnInit {

  ROOT_URL: string = 'https://jsonplaceholder.typicode.com/users'
  results: any[]

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.http.get(this.ROOT_URL).subscribe(data => {
      this.results = data
      console.log(this.results) //this is an array in the console 
    })
  }

}

表layout.component.html

<p-dataTable [value]="results">
</p-dataTable>