HintergrundAngular2 Artikel mit ngIf flackert
ich eine Kreditkarte Formularkomponente zu schaffen. Die Komponente prüft, welcher Kreditkarten-Typ eingegeben wurde und zeigt ein Symbol/Symbol des Kartentyps an. Das Symbol ist ein externes SVG, das geladen wird, sobald der Kreditkarten-Typ identifiziert wurde.
Problem
Das cc-Symbol flackert, wie Sie unten im Bild sehen können. Ein Blick in den Chrome-DOM-Inspektor zeigt mir, dass etwas mit dem Element passiert, auf das *ngIf angewendet wurde, das Element wird irgendwie aktualisiert (ohne Attribute zu ändern), was das Flackern verursacht.
-Code
Unten ist der Code für den Teil meiner Vorlage, die das Flimmern Teil enthält. Ich habe die Komponente überprüft und die Variable in ngIf wird nicht aktualisiert, außer wenn es angenommen wird (wenn die Kreditkartennummer zu einem anderen Typ geändert wird).
<div class="credit-card-icon" *ngIf="creditCardType != null">
<object type="image/svg+xml" [data]="getTypeIconUrl()"></object>
</div>
Was könnte dieses Problem verursachen, und wie würde ich es lösen?
UPDATE
Es stellt sich heraus, dass dies tatsächlich das [data] Attribut verursacht wird, eher als alles, was mit ngIf zu tun. Tut mir leid, dass ich dich beschuldige, ngIf.
Ich nehme an, dass 'getTypeIconUrl()' jedes Mal aufgerufen wird, wenn sich Ihr Formular ändert. Ich weiß nicht, was da drin ist, aber es sieht so aus, als würde es einige Millisekunden dauern. Ich denke, dass Sie das Flackern nicht haben werden, wenn Sie ein einfaches 'img' mit einem png oder so verwendeten. –
Es würde Sinn machen, wenn das Formular geändert wurde, aber das Flackern geht weiter, auch nachdem das Tippen beendet wurde. Schau dir das GIF in meinem Post an und du wirst sehen! Auch die Verwendung eines 'img' -Tags würde nicht helfen, da es das äußere' div' ist, das flackert. –