補間による値の表示

補間とは、マークアップされたテキストに式を埋め込むことを指します。デフォルトでは、補間は二重中括弧 {{ と }} を区切り文字として使用します。

補間がどのように機能するかを説明するために、currentCustomer 変数を含むAngularコンポーネントを考えてみましょう。

      import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {CUSTOMERS} from './customers';
@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [NgFor],
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  customers = CUSTOMERS;
  currentCustomer = 'Maria';
  title = 'Featured product:';
  itemImageUrl = '../assets/potted-plant.svg';
  recommended = 'You might also like:';
  itemImageUrl2 = '../assets/lamp.svg';
  getVal(): number {
    return 2;
  }
}

対応するコンポーネントテンプレートで、この変数の値を表示するために補間を使用します。

      
<div>
  <h1>Interpolation and Template Expressions</h1>
  <hr />
  <div>
    <h2>Interpolation</h2>
    <h3>Current customer: {{ currentCustomer }}</h3>
    <p>{{ title }}</p>
    <div><img alt="item" src="{{ itemImageUrl }}"></div>
    <h3>Evaluating template expressions </h3>
    <h4>Simple evaluation (to a string):</h4>
    <!-- "The sum of 1 + 1 is 2" -->
    <p>The sum of 1 + 1 is {{ 1 + 1 }}.</p>
    <h4>Evaluates using a method (also evaluates to a string):</h4>
    <!-- "The sum of 1 + 1 is not 4" -->
    <p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}.</p>
  </div>
  <hr />
<h2>Expression Context</h2>
<div>
  <h3>Component context, properties of app.component.ts:</h3>
  <h4>{{ recommended }}</h4>
  <img alt="item 2" [src]="itemImageUrl2">
</div>
<div>
  <h4>Template context, template input variables (let customer):</h4>
  <ul>
    @for (customer of customers; track customer) {
      <li>{{ customer.name }}</li>
    }
  </ul>
</div>
<div (keyup)="0">
  <h4>Template context: template reference variables (#customerInput):</h4>
  <label for="customer-input">Type something:
    <input id="customer-input" #customerInput>{{ customerInput.value }}
  </label>
</div>
</div>

Angularは currentCustomer を対応するコンポーネントプロパティの文字列値に置き換えます。この場合、値は Maria です。

次の例では、Angularは title と itemImageUrl プロパティを評価して、タイトルテキストと画像を表示します。

      
<div>
  <h1>Interpolation and Template Expressions</h1>
  <hr />
  <div>
    <h2>Interpolation</h2>
    <h3>Current customer: {{ currentCustomer }}</h3>
    <p>{{ title }}</p>
    <div><img alt="item" src="{{ itemImageUrl }}"></div>
    <h3>Evaluating template expressions </h3>
    <h4>Simple evaluation (to a string):</h4>
    <!-- "The sum of 1 + 1 is 2" -->
    <p>The sum of 1 + 1 is {{ 1 + 1 }}.</p>
    <h4>Evaluates using a method (also evaluates to a string):</h4>
    <!-- "The sum of 1 + 1 is not 4" -->
    <p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}.</p>
  </div>
  <hr />
<h2>Expression Context</h2>
<div>
  <h3>Component context, properties of app.component.ts:</h3>
  <h4>{{ recommended }}</h4>
  <img alt="item 2" [src]="itemImageUrl2">
</div>
<div>
  <h4>Template context, template input variables (let customer):</h4>
  <ul>
    @for (customer of customers; track customer) {
      <li>{{ customer.name }}</li>
    }
  </ul>
</div>
<div (keyup)="0">
  <h4>Template context: template reference variables (#customerInput):</h4>
  <label for="customer-input">Type something:
    <input id="customer-input" #customerInput>{{ customerInput.value }}
  </label>
</div>
</div>

次へ