Блог

Главная - Вопросы по программированию - Выбор углового материала — Хотите связать значения параметра mat с более крупными выходами

Выбор углового материала — Хотите связать значения параметра mat с более крупными выходами

#angular #typescript #angular-material

Вопрос:

 <mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

Я хотел бы вывести больше, чем вариант 1, 2, 3, три, если я выберу одно из этих значений.
Таким образом, должен появляться текст большего размера, чем. Поэтому я хотел бы выбрать абзац по номеру, а затем вывести весь абзац, если он выбран.
Как я мог этого достичь?

Ответ №1:

Вам нужно получить ваши абзацы и добавить все это в массив. Далее нужно использовать оператор *ngFor в шаблоне для повторения всего списка абзацев. Проверьте мой пример:

в шаблоне html

 <mat-form-field appearance="fill">
  <mat-label>Select</mat-label>
  <mat-select>
    <!-- // here is we doing iteration all of paragraphs -->
    <ng-container *ngFor="let item of paragraphs">
      <mat-option value="item?.line"> {{ item?.name }}</mat-option>
    </ng-container>

  </mat-select>
</mat-form-field>

<!-- increasing array length -->
<button mat-button (click)="addItems()"> Add Item</button>

и машинописный код

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

interface Paragraph {
  line: number;
  name: string;
};

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css']
})

export class FormFieldOverviewExample {


  paragraphs : Paragraph[] = [];

  constructor () {

    this.paragraphs = [
      { line: 1, name: 'P1'},
      { line: 2, name: 'P2'},
      { line: 3, name: 'P3'}
    ];
  }

  addItems() {
    this.paragraphs.push( {line: this.paragraphs.length 1, name: 'P' (this.paragraphs.length 1)})
  }
}

Комментарии:

1. Если вы хотите изучать угловой, я советую вам пройти мини-курс angular.io/tutorial Вот все, что вам нужно для разработки для начала

Ответ №2:

Как я понял ваш вопрос, цель здесь состоит в том, чтобы отобразить больший абзац под фактическим мат-выбором в зависимости от выбранного в данный момент значения. Для достижения этой цели существует несколько подходов. Поскольку вы используете не массив, а только html-шаблон, вы можете использовать директиву ngSwitchCase: https://angular.io/api/common/NgSwitchCase

Пример:

 <mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<div [ngSwitch]="selected">
    <p *ngSwitchCase="'option1'">Your long text 1 here</p>
    <p *ngSwitchCase="'option2'">Your long text 2 here</p>
    <p *ngSwitchDefault>Text when nothing is selected.</p>
</div>
Метки: