Angular tidak merender HTML ditarik dari komponen?

Oct 08 2020

Saya menggunakan serial video untuk mengenal Angular, codewithmosh. Dia menggunakan glyphicons di salah satu latihannya, tetapi videonya dari 2018. Dukungan glyphicon tampaknya telah dihentikan di bootstrap sejak saat itu, tetapi situs bootstrap masih menyertakan html untuk ikon mereka. Saya pikir saya akan melihat apakah saya bisa melakukan hal yang sama dengan mendorong html mentah.

Masalahnya adalah, html yang diambil dari component.ts tidak dirender, dan hanya menampilkan kode html di halaman. Html yang sama di rendering component.html IS.

Saya benar-benar baru di sini sehingga mungkin ada kesalahan yang jelas dalam kode saya. Mungkin tidak cantik tapi TAMPAKNYA terdengar, dan saya tidak tahu mengapa tidak berhasil. Idealnya ini harus dirender sebagai bintang kosong, yang bila diklik akan beralih ke bintang penuh.

Terima kasih sebelumnya atas bantuannya!

inilah app.component.ts:

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

@Component({
  selector: 'app-star',
  templateUrl: './star.component.html',
  
 })

export class StarComponent {
  isClicked: boolean;

  
  fullStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  emptyStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  currentSymbol: string = this.emptyStar;
  
  onClick() {
    this.isClicked = !this.isClicked;

    this.currentSymbol = this.isClicked ? this.fullStar : this.emptyStar;
    
  }
}

Inilah star.component.html:

{{currentSymbol}}
-------
    <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
    </svg>

Inilah app.component.html, super basic:

<app-star></app-star>

Dan inilah keluaran htmlnya.

Jawaban

2 Elmehdi Oct 08 2020 at 02:45

Kedua svg yang Anda berikan sudah diisi, tetapi saya membuatkan Anda contoh menggunakan bintang biasa dan bintang kecil.

Cukup ganti bintang kecil dengan bintang kosong, dan itu akan berhasil.
yang pada dasarnya saya lakukan adalah, saya memberi ngIf pada kedua svg, satu dengan kondisi isClickeddan yang lainnya dengan kondisi yang berlawanan, jadi !isClicked.
Anda berfungsi untuk mengubah kondisi onClick()bekerja dengan baik.