小编koq*_*que的帖子

我以前在我的Angular 4应用程序中使用了lodash,只需导入并使用它,如下所示:

import lodash from 'lodash';

public getSubtotal() : number {
  return lodash.sumBy(this.cartItems, function(item) {        
    return item.product.price * item.item.quantity;
  })

}

我再一次尝试使用lodash,但是我得到的错误是lodash未定义.

import lodash from 'lodash';

lodash.indexOf([1, 2, 1, 2], 2);

我收到以下错误:

ERROR TypeError: Cannot read property 'indexOf' of undefined
at CustomizeComponent.showTopping (customize.component.ts:39)
at Object.eval [as updateDirectives] (CustomizeComponent.html:285)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638)
at checkAndUpdateView (core.js:13785)
at callViewAction (core.js:14136)
at execComponentViewsAction (core.js:14068)
at checkAndUpdateView (core.js:13791)
at callViewAction (core.js:14136)
at execEmbeddedViewsAction (core.js:14094)
at checkAndUpdateView (core.js:13786)

我使用输入绑定将产品从父组件传递到子组件,它在第一次调用子组件时工作.我希望每次在父级中修改时,对filterProduct()中的产品的更改都会反映在子级中,但这种情况不会发生.我该如何实现这一目标.

父模板:

<div class="container-fluid">
<div class="col-sm-9">
    <app-product-card [products]=products></app-product-card>
</div>

父组件:

@Component({
  selector: 'app-appliances-product-card',
  moduleId: module.id,
  templateUrl: 'appliances-product-card.component.html'
})

export class AppliancesProductCardComponent implements OnInit{    
   products: Product[];

   filterProduct(filter) {
     this.products = this.filteredProducts;         
  }
}

子组件:

@Component({
  selector: 'app-product-card',
  moduleId: module.id,
  templateUrl: 'product-card.component.html'
})

export class ProductCardComponent {
  @Input() products: Product[];
}

在下面显示的代码中，

我正在迭代deliveryMethods哪些在视图中显示为单选按钮。我打算预先选择第一个单选按钮。

我应用了以下属性：

[checked]="ndx==0"

其中ndx是每次迭代的索引。但是没有选中任何单选按钮。

如何动态预选第一个单选按钮？

<div *ngFor="let dm of deliveryMethods; let ndx=index">
   <label class="form-check-label">
      <input class="form-check-input f-s-1pt2" type="radio" 
             name="dm.name" 
             value="{{dm.name}}" 
             [(ngModel)]="item.item.deliveryMethod"
             (change)="filterProducts(item)"
             [checked]="ndx==0"
             class="radio-dimension"> 
             {{dm.label}}
   </label>
</div>

在下面的代码段中，我正在迭代 ardene.section1.items。我已将此数组记录到控制台以验证它确实存在。“BEFORE FOR LOOP”测试会打印到屏幕上，但“INSIDE FOR LOOP”测试不会打印。我得到了 NG0901 错误，Angular 告诉我这是一个 ngDoCheck 错误。

<div class="row mt-4">
BEFORE FOR LOOP
<div class="col text-center col-12 col-md-3 mb-4 mb-md-0"
    *ngFor="let item of ardene.section1.items">
    INSIDE FOR LOOP
    <img class="img-fluid" 
        src=`{{ardene.assetPath}}{{item.img}}`>
    <div>
        <h5 class="text-center fw-bold mt-2">{{item.name}}</h5>
        <h6 class="text-center">{{item.description}}<br></h6>
        <a>
            <h6 class="fw-bold">Shop Now</h6>
        </a>
    </div>
</div>    

生成 ardene.section1.items 的组件代码如下所示。

  constructor(
    private store:Store<{ardeneState}>
  ) { }

  ngOnInit(): void {
    this.subscribeToReduxStores();
  }

private subscribeToReduxStores = () => {
const ardene$ = this.store.select(state => {
  return state.ardeneState
})

ardene$.subscribe(ardene => { …

当父元素“.collection”悬停时，这是针对子元素“#overlay”的 css。

.collection {
    position: relative;
    overflow: hidden;
}

.collection:hover #overlay { 
    position: absolute;
    opacity: .3;
}

这是 HTML：

import styles from "./Home.module.css";

<div className={`${styles.collection} card`}>
    <div id="overlay"></div>
</div>

当父元素悬停时，这些属性不会应用于子元素。

我想在 Angular Material 中实现以下引导选择。如何在引导程序中实现此处显示的更改事件？

<select (change)="sortByProducts($event.target.value)">
    <option *ngFor="let filter of filters" [value]="filter.id">
        {{filter.title}}
    </option>
</select>

如何将更改事件添加到调用 sortByProducts 函数的材料中，如上面所示的代码段中所做的那样？

<mat-form-field>
   <mat-select>
       <mat-option *ngFor="let filter of filters" [value]="filter.id">
            {{filter.title}}
       </mat-option>
   </mat-select>
</mat-form-field>

我想同时更改 Material 徽章的背景和文本颜色，而不是使用标准的 Material 颜色，我该怎么做？

<mat-icon matBadge="{{this.userService.numberOfCartItems}}" 
     matBadgePosition="above after" matBadgeColor="accent">
     shopping_cart
</mat-icon>

导入 css 类，然后将其应用到元素，如下所示；

import styles from "./Home.module.css";

<div className={(styles.collection, "card")}>

它们单独工作，但当如上所示应用时，样式不会应用于元素。

我在 graphcms 中创建了以下查询，它在 graphql 游乐场中工作，但是当我将查询转移到我的 React 代码并尝试访问 graphcms 时，我收到如下所示的 403 错误。

查询：

import { request, gql } from 'graphql-request';

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export const getPosts = async () => {
  const query = gql`
  query MyQuery {
    postsConnection {
      edges {
    node {
      author {
        bio
        id
        name
        photo {
          url
        }
        post {
          categories {
            name
            slug
          }
        }
      }
      createdAt
      slug
      title
      excerpt
      featureImage {
        url
      }
    }
  }
}

}

`;

const 结果 = 等待请求（graphqlAPI，查询）；

返回结果.postsConnection.edges; …

我正在完全按照 Angular 文档中所示对我对 switchMap 的使用进行建模：

角度文档实现：

ngOnInit() {
  this.hero$ = this.route.paramMap
    .switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')));

}

我的实现：

ngOnInit() {
    let product$ = this.route.paramMap
     .switchMap((params: ParamMap) =>
     this.getProduct(params.get('id')));

}

我的 switchmap 实现在编辑器中产生以下错误：（不是运行时错误）

[ts]
Argument of type '(params: ParamMap) => void' is not assignable to parameter 
of type '(value: ParamMap, index: number) => ObservableInput<{}>'.
  Type 'void' is not assignable to type 'ObservableInput<{}>'.

这是我的 getProduct() 方法：

private getProduct(id:string) {
this.dataService.getProduct(id).subscribe(product => {
  this.product = product;
  this.currentImage = product.image[0];
  console.log('product = ', this.product)
  return …