css - Angular 6: อัปเดต NG Style ด้วยฟังก์ชัน

ฉันมาที่นี่วันนี้เพราะฉันสงสัยเกี่ยวกับ NG Style กับ Angular (เวอร์ชันของฉันคือ 6) ฉันจะสามารถ อัปเดต [ngStyle] ได้อย่างไรเมื่อ ฉันใช้ฟังก์ชัน เพื่อคืนค่าหนึ่ง

ตามปกติ นี่คือตัวอย่างที่ง่ายขึ้นของปัญหาของฉัน:

ฉันสร้าง div จากอาร์เรย์ของอ็อบเจ็กต์ สำหรับแต่ละส่วน จะมี div สองตัว: หนึ่งตัวทางซ้ายและหนึ่งตัวทางขวา

ขนาดของ div ทางด้านซ้ายจะเปลี่ยนตามเนื้อหา ดังนั้นมันสามารถเป็นได้ทั้ง 50px และ 125px

ฉันต้องการให้ div ด้านขวาพอดีกับขนาดของ div ด้านซ้าย โดยจะมีขนาดครึ่งหนึ่งตลอดเวลา (2 ใน getLeftDivHeight) ซึ่งแน่นอนว่าจะต้องทำในแต่ละ section (Container)

ฉันจะทำให้ ngStyle อัปเดตเมื่อความสูงของ div ด้านซ้ายเปลี่ยนแปลงได้อย่างไร (เนื่องจากการปรับขนาด, การเพิ่มเนื้อหา, หรือเวลาการแสดงผลหน้า)?

นี่คือโค้ด:

เอชทีเอ็มแอล

<section class = "Container" *ngFor="let oneContent of allContent">

<div id = "{{oneContent.id}}" style="float: left">
<p> {{oneContent.Content}} </ p>
</div>

<div style="float: right" [ngStyle]="height: getLeftDivHeight(oneContent.id, 2)">
</div>

</div>

ไทพ์สคริปต์ (เฉพาะฟังก์ชันที่เกี่ยวข้อง)

getLeftDivHeight(id: string, divisionNumber: number): string {
height = document.GetElementById(id).getBoundingClientRect().height / 
divisionNumber;
return height + 'px';
}

โปรดทราบว่าฉันไม่ได้มองหาวิธีแก้ปัญหาแบบ HTML แต่เป็นแบบ Angular โค้ดด้านบนเป็นเพียงตัวอย่างเพื่ออธิบายปัญหาของฉัน

ขอบคุณล่วงหน้า

คำตอบ #1

คุณสามารถส่งคืนสตริงสไตล์ทั้งหมด เช่น height: 100px จากเมธอด getLeftDivHeight

getLeftDivHeight(id: string, divisionNumber: number): string { height=document.GetElementById(id).getBoundingClientRect().height/divisionNumber; return `height: $ {height}px`; }

หรือคุณสามารถใช้ไวยากรณ์ด้านล่างในเทมเพลต [style.height.px]="getLeftDivHeight(parameters)" โดยให้เมธอดส่งค่าความสูงเป็นตัวเลขเท่านั้น

คำตอบ #2

ดังนั้น ในที่สุดฉันก็สามารถทำมันได้ โดยใช้คำสั่งหนึ่ง

ฉันใช้ ElementRef เพื่อเข้าถึงวัตถุ HTML ของ div ด้านขวาของฉัน

import {ElementRef,Renderer} from '@angular/core';
constructor(private el: ElementRef,public renderer: Renderer) {}

จากนั้น ฉันใช้ Dom เพื่อเข้าถึงความสูงของ div ซ้าย

this.el.nativeElement.parentElement.childElement[0].clientHeight;

แล้วฉันใช้ this.renderer.setElementStyle() เพื่อใช้สไตล์

ฉันยังได้เรียนรู้ด้วยว่าการใช้ offscrollheight มาคำนวณไม่ใช่ความคิดที่ดี!