Question

尝试模拟此示例https://material.angular.io/components/icon/examples

这是我的代码：

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

import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
import { MatFormFieldControl } from '@angular/material';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA } from '@angular/cdk/keycodes';

@Component({
  selector: 'hello',
  template: `

      <mat-form-field class="demo-chip-list">
        <mat-chip-list #chipList>
          <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                  [removable]="removable" (remove)="remove(fruit)">
            {{fruit.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="New fruit..."
                [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" />
        </mat-chip-list>
      </mat-form-field>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;

  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  fruits = [
    { name: 'Lemon' },
    { name: 'Lime' },
    { name: 'Apple' },
  ];


  add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

  remove(fruit: any): void {
    let index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

我创建了一个stackblitz here，我找不到他们的样本和我的样本。

Answer 1

您需要在index.html文件中添加：

version: '3.3'

services:
  client:
    container_name: client
    build:
      context: ./services/client
      dockerfile: Dockerfile
    volumes:
      - './services/client:/usr/src/app'
    ports:
      - '3007:3000'
    environment:
      - NODE_ENV=development
    depends_on:
      - project
    links:
      - project

  db:
    container_name: db
    build:
      context: ./services/db
      dockerfile: Dockerfile
    ports:
      - 5435:5432
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres

  project:
    container_name: project
    build: ./services/project
    volumes:
      - './services/project:/usr/src/app'
      - './services/project/package.json:/usr/src/app/package.json'
    ports:
      - 3000:3000
    environment:
      - DATABASE_URL=postgres://postgres:postgres@db:5432/esports_manager_dev
      - DATABASE_TEST_URL=postgres://postgres:postgres@db:5432/esports_manager_test
      - NODE_ENV=${NODE_ENV}
      - TOKEN_SECRET=tempsectre
    depends_on:
      - db
    links:
      - db

在style.css中添加一个主题，如：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

它应该有用。

Here the modified code

材料图标与名称无关

1 个答案: