もくじ
猫じゃらしを穀物の仲間とすると、猫じゃらしでラーメンを作れますか?
猫じゃらしと穀物はまったく異なるものであり、食品として使用することはできません。猫じゃらしは一般的に猫の遊び道具として使われる羽や毛皮、紐などを束ねたものであり、食品としての用途はありません。
また、ラーメンを作るためには、小麦粉や水、塩などの原材料が必要です。これらを混ぜ合わせて麺を作り、スープや具材を加えて調理します。猫じゃらしにはこれらの原材料は含まれておらず、食品として使用することはできません。
したがって、猫じゃらしではラーメンを作ることはできません。食品を調理する際には、適切な材料を使用することが重要です。
以下のHTMLとtypescriptのプログラムの動きの概要を教えてください。
■プログラム
<ul class="tag-list">
<li class="data-select-list-li"
[ngClass]="{ 'selected': tagIdSelectValue === 0 }"
(click)="onClickTagAll()">すべて</li>
</ul>
<ng-container *ngFor="let item of tagThemes; let i = index">
<div (click)="show01(i)">
<div class="li-title" [ngClass]="tagArray[i] && tagArray[i].on == 1 ? 'on' : 'off'">
<svg
xmlns="<http://www.w3.org/2000/svg>"
width="11.667"
height="7.205"
viewBox="0 0 11.667 7.205"
>
<path
id="arrow"
d="M-1665.09-308.469l-3.832,4.522a.777.777,0,0,1-1.184,0l-3.832-4.522"
transform="translate(1675.347 309.878)"
fill="none"
stroke="#666666"
stroke-linecap="round"
stroke-width="2"
/>
</svg>{{item.name}} <span class="sub">{{item.subname}}</span>
</div>
<ng-template [ngIf]="tagArray[i] && tagArray[i].on == 1">
<ul class="tag-list">
<ng-container *ngFor="let tag of item.tags">
<li *ngIf="tag.count!='0' "
(click)="onClickTag01(tag.TagId, tag.name, $event)"
[ngClass]="tagIdSelectValue == tag.TagId ? 'selected' : ' '"
>{{ tag.name }}({{ tag.count }})</li>
</ng-container>
</ul>
</ng-template>
</div>
</ng-container>
このHTMLとTypeScriptのプログラムは、以下のような動作を行います。
HTMLのulタグ内に、class属性が「tag-list」であるliタグが1つあります。liタグには、class属性が「data-select-list-li」となっており、[ngClass]属性と(click)属性が設定されています。 ngForディレクティブを使用して、ng-container要素内に複数のdiv要素を表示します。div要素には、(click)属性が設定されています。 各div要素には、li-titleというclass属性があり、この要素内にはSVGアイコンと、アイコンの横に表示されるタグ名とサブ名が含まれています。 各div要素には、ngIfディレクティブが設定されており、タグ名のリストを表示するためのulタグが含まれています。 タグ名のリストは、ngForディレクティブを使用して生成され、タグ名とそのカウント数が表示されます。 各liタグには、(click)属性と[ngClass]属性が設定されており、選択されたタグのスタイルを変更することができます。 コンポーネントクラスには、onClickTagAll()、show01()、onClickTag01()という3つのメソッドがあり、それぞれがそれぞれの要素のクリックイベントを処理します。