小编Fac*_*uch的帖子

我正在使用Angular 2创建一个过滤器页面.数据将根据选中的复选框进行过滤.

这是HTML

    <input required type="checkbox" name="checkbox" value="value1" (change)="toggleFilter(kind.value)" #kind/>
    Filter option 1

    <input required type="checkbox" name="checkbox" value="value2" (change)="toggleFilter(kind2.value)" #kind2 />
    Filter option 2

    <input required type="checkbox" name="checkbox" value="value3" (change)="toggleFilter(kind3.value)" #kind3 />
    Filter option 3


<div *ngFor="let item of (items | FilterPipe: filterFormat)">
    {{item.id}} {{item-title}}
</div>

这是我的Item组件的一部分.在toggleFilter()i中filterOptions,使用复选框的值来填充数组.在get filterFormat()返回所填充的阵列,并把它作为一个参数Filterpipe(其位于HTML)

filterOptions: [] = [];

toggleFilter(value: any) {

    let index = this.filterOptions.indexOf(value);

    if (index > -1) {
      this.filterOptions.splice(index, 1);
    } else {
      this.filterOptions.push(value);
    }

    return …

我正在尝试使用样式组件创建动态标签。标签是通过 props 接收的。

这是代码示例：

import * as React from 'react';
import styled from 'styled-components';

type ContainerProps = {
    children: React.ReactNode,
    type?: 'section' | 'div' | 'article',
}

const Container = styled.div`
  color: ${props => props.theme.primaryColor};
`;

const Icon = styled.div<ContainerProps>`
    background-color: red;
`;

const container: React.FunctionComponent<ContainerProps['children']> = ({ children, type = 'section' }: ContainerProps) => {
    return (
        <Container>
            <{ children }
        </Container>
    );
};

export default container;

我试图实现标签<Container>（现在div）是基于prop.type.